选择输入法触摸时未打开 -

Question

我有一个摄像头/演示应用程序。

在白板工具（从左侧工具栏底部按钮打开）中，我无法获取颜色选择器或选择在 touchstart 事件或我尝试的任何其他组合上打开的字段。 任何帮助或指导将不胜感激。

HT

<aside class="toolbar" id="toolbar">
    <!--All the tools and buttons to operate camera-->
    <h3>Tools</h3>
    <section class="tools-container">
        <button id="get-webcam" class="btn get-camera-btn tooltip-right"></button>
        <button id="invert-webcam" class="btn invert-camera-btn tooltip-right" disabled></button>
        <button id="get-display" class="btn get-display-btn tooltip-right"></button>
        <button id="make-whiteboard" class="btn make-whiteboard-btn tooltip-right"></button>
        <button id="get-mic" class="btn get-mic-btn tooltip-right"></button>
        
        <button id="whiteboard-tools-toggle" class="btn whiteboard-toggle-btn tooltip-top"></button>
    </section>
</aside>
<main id="main-container" class="main-container">
    <canvas id="main-canvas" class="main-canvas">
        <p>Update browser in order to use this Every Cam.</p>
    </canvas>
    <canvas id="whiteboard-canvas" class="whiteboard-canvas"></canvas>
    <div class="whiteboard-tools-wrapper">
        <section id="textbox-container" class="textbox-container">
            <input type="text" name="onscreen-text" id="onscreen-text" />
            <button id="text-place" class="btn text-place-btn tooltip-top">Place</button>
        </section>
        <section class="whiteboard-tools-container">
            <button id="pencil-tool" class="btn pencil-btn tooltip-top"></button>
            <button id="eraser-tool" class="btn eraser-btn tooltip-top"></button>
            <button id="text-tool" class="btn text-tool-btn tooltip-top"></button>
            <button id="line-tool" class="btn line-btn tooltip-top"></button>
            <button id="square-tool" class="btn square-btn tooltip-top"></button>
            <button id="ellipse-tool" class="btn ellipse-btn tooltip-top"></button>
            <input type="color" value="#257FD2" id="color-select" class="btn color-btn tooltip-top">
            <div class="color-style-wrapper tooltip-top">
                <select name="color-style-select" id="color-style-select" class="select-btn color-select-btn">
                    <option value="stroke">Stroke</option>
                    <option value="fill">Fill</option>
                </select>
            </div>
            <div class="size-select-wrapper tooltip-top">
                <select name="stroke-size-select" id="stroke-size-select" class="select-btn size-select-btn">
                    <option value="3">Small</option>
                    <option value="6">Medium</option>
                    <option value="9">Large</option>
                    <option value="12">XLarge</option>
                </select>
            </div>
            <button id="clear-whiteboard" class="btn clear-whiteboard-btn tooltip-top"></button>
        </section>
    </div>
    
</main>

ML

JS

const addFocus = (el)=>{
  el.focus();
}

this.textToolBar.textInp.addEventListener('input', e => {
  app.whiteboard.textTool.setText(e.target.value);
});
this.textToolBar.textInp.addEventListener('touchstart', ()=>{
  addFocus(this.textToolBar.textInp);
})

this.wbToolbar.colorSelect.addEventListener('input',(e)=>{
  app.whiteboard.color = e.target.value;
  //console.log(e.target.value);
});
this.wbToolbar.colorSelect.addEventListener('touchstart', (e)=>{
  console.log(e.target);
  e.target.focus();
});

this.wbToolbar.colorStyleSelect.addEventListener('change',(e)=>{
  app.whiteboard.shapeStyle = e.target.value;
  //console.log(e.target.value);
});
this.wbToolbar.colorStyleSelect.addEventListener('touchstart',(e)=>{
  console.log(e.target);
  e.target.focus();
});

this.wbToolbar.strokeSizeSelect.addEventListener('change', (e)=>{
  app.whiteboard.strokeSize = e.target.value;
  //console.log(e.target.value);
});
this.wbToolbar.strokeSizeSelect.addEventListener('touchstart', (e)=>{
  console.log(e.target);
  e.target.focus();
});

我尝试过防止默认，我尝试过停止传播。 我尝试在 touchstart 上强制单击事件。 我有其他鼠标和触摸侦听器，我尝试对它们执行相同的操作，以查看它是否在上游。 没有运气。

Answer 1

找到解决方案！ 答案确实在@barmar 的评论中。 我有上游观察者的干扰。 我确实需要将所有内容放在一个地方，但我还不知道如何做。 我确信未来会重构。

我需要从选择器中删除“touchstart”事件，并为其他按钮观察者防止“touchend”上的默认事件。