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
– Josh Stevenson, Commented May 21, 2015 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
– Panomosh, Commented May 21, 2015 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
– adeneo, Commented May 21, 2015 at 14:16

Josh Stevenson · Accepted Answer · 2015-05-21 13:03:26Z

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, 2015 at 13:03

Josh Stevenson

9055 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Over a year ago

When I remove the for the checkboxes dont check on click.

Community · Accepted Answer · 2017-05-23 11:43:45Z

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, 2017 at 11:43

CommunityBot

11 silver badge

answered May 21, 2015 at 12:52

AmmarCSE

30.7k6 gold badges48 silver badges53 bronze badges

5 Comments

Alex Over a year ago

Thanks for the answer, but that doesnt work. I have added more info to my post.

Alex Over a year ago

Without the for attribute the checkboxes are not getting checked, any suggestions?

AmmarCSE Over a year ago

@undroid, even if you click the checkbox itself?

Alex Over a year ago

Yes, nothing happens.

AmmarCSE Over a year ago

@undroid, can you reproduce it in a fiddle?

Collectives™ on Stack Overflow

Unable to disable click event from element with plain JavaScript

2 Answers 2

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related