Unable to disable click event from element with plain JavaScript

Question

I'm trying to detach click event from several p elements via plain JavaScript. I'm able to access these p elements, but for some reason I'm not able to remove the click listener. It works fine with jQuery, but not with pure JS. getP_element function is called upon page load. Here's my code:

function getP_element(){
    console.log("page loaded");
    var p_array = document.getElementById("checkboxesContainer").getElementsByTagName("p");
                for(var i=0;i<p_array.length;i++){
                    p_array[i].onmousedown = new function(){
                        return false; //this doesnt work
                    }
                }
    $("#checkboxesContainer p").click(false); //this works
}

EDIT: More info about what's happening here. I created several custom checkboxes with custom style. Fore some reason the checkboxes get selected even when the user clicks on the p tags, so I figured I need to detach the click events. This is how they are defined inside my HTML:

<div id="checkBoxDiv2" class="checkBoxDiv">
                <input type='checkbox' value='someValue' id="checkBox2"/>
                <label for="checkBox2"><p class="checkBoxText">some text goes here</p>
                    <span></span>
                </label>
            </div>

Why are you defining a `function` inside a loop, and why are you using `new`? — Josh Stevenson, May 21 '15 at 12:51
I'm slightly worried about the future of web development if you are a CS grad working as a front end developer, and you're coding like this :S — Panomosh, May 21 '15 at 13:08
The checkboxes are supposed to get checked when clicking the ***label***, if you don't want that, just remove the `for` attribute ? — adeneo, May 21 '15 at 14:16

score 1 · Answer 1 · answered May 21 '15 at 13:03

1

You don't need to disable the click event.

The checkboxes are getting selected when you click on the p because you have the p tag inside a label which has for="checkBox2"

That's what it's meant to be doing.

Remove the for and it will prevent clicking the label from activating the correspinding input element

answered May 21 '15 at 13:03

Josh Stevenson

895
5
17

When I remove the `for` the checkboxes dont check on click. – Alex May 25 '15 at 07:11

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

Try

p_array[i].onmousedown = null;

See How to Clear/Remove JavaScript Event Handler?

Edit

The reason that the checkboxes are checked when clicking on p tags has nothing to do with click handlers.

Rather the reason is the for attribute in the parent label tag. This will check the checkboxes when a click occurs on the label.

Change your HTML to

<label><p class="checkBoxText">some text goes here</p>
                    <span></span>
                </label>

edited May 23 '17 at 11:43

Community

1
1

answered May 21 '15 at 12:52

AmmarCSE

30,079
5
45
53

Thanks for the answer, but that doesnt work. I have added more info to my post. – Alex May 21 '15 at 13:00
Without the `for` attribute the checkboxes are not getting checked, any suggestions? – Alex May 21 '15 at 13:25
@undroid, even if you click the checkbox itself? – AmmarCSE May 21 '15 at 13:35
Yes, nothing happens. – Alex May 25 '15 at 07:11
@undroid, can you reproduce it in a fiddle? – AmmarCSE May 25 '15 at 10:10

Unable to disable click event from element with plain JavaScript

2 Answers2