Javascript "onmousedown" isn't firing

Question

I'm trying to run a function on an element "onmousedown". Here's the code:

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

But when I click the slider, I don't see either the console.log() message or the function running. Any idea what could be causing this?

score 1 · Answer 1 · answered Aug 17 '20 at 05:29

1

since mouse down is only on input element only that will listen to event, if you move mouse down to <label class="switch"> then the event from child elements will also bubble up to the element and that cover down event for all 3 elements

answered Aug 17 '20 at 05:29

Alok Takshak

282
1
6

score 0 · Accepted Answer · answered Aug 17 '20 at 05:28

0

Try adding the listener to the label instead of input element.

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

answered Aug 17 '20 at 05:28

Koray Kural

168
2
6

score 0 · Answer 3 · answered Aug 17 '20 at 05:36

Inputs onmousedown is working good, you can move your listener to the parent block to get success

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" isn't firing

3 Answers3