Javascript "onmousedown" 没有开火

Question

我正在尝试运行元素“onmousedown”上的函数。这是代码：

<label class="switch">
     <input type="checkbox" onmousedown="console.log('Run the function'); 
            manageBook(this);"  id="element-id-52"  data-mode= "offx">
     <span class="slider round"></span>
</label>

但是当我单击滑块时，我没有看到 console.log() 消息或函数运行ning。知道是什么原因造成的吗？

Answer 1

尝试将侦听器添加到标签而不是输入元素。

<label
  class="switch"
  onmousedown="console.log('Run the function'); manageBook(this);
>

Answer 2

因为鼠标按下仅在输入元素上才会监听事件，如果您将鼠标向下移动到 <label class="switch"> 那么来自子元素的事件也将向上冒泡到该元素并覆盖向下事件所有 3 个元素

Answer 3

输入 onmousedown 运行良好，您可以将侦听器移动到父块以获得成功

const manageBook=(input)=>{
    console.log('manage book', input);
};

const withSpan=(a)=>{
    console.log('with span', a);
};

<label class="switch" onmousedown="withSpan(this);">
    <input type="checkbox" onmousedown="console.log('Run the function');manageBook(this);" id="element-id-52" data-mode="offx">
    <span class="slider round">aaaa</span>
</label>

Javascript "onmousedown" 没有开火

Javascript "onmousedown" isn't firing

javascript

checkbox

onmousedown