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()消息，也看不到函数正在运行。知道是什么原因造成的吗？

Answer 1

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

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

Answer 2

由于鼠标按下仅在将侦听事件的输入元素上，如果将鼠标向下移动到<label class="switch">，则来自子元素的事件也将向上冒泡到该元素，并覆盖所有3个元素的向下事件

Answer 3

Input 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>

​