Question

I want to fix a problem I have attaching an onclick element to a div ( and only to it! )

Please look at following code :

<script>
function  goToo(url,idd){
alert(idd);
if (idd=="onlyMe")
window.location=url;
}
</script>
<div id="onlyMe" onclick="javascript:goToo('http://www.google.com', this.id)" style="<-index:-150">
<form><input type="text" name="coap"></form>

<h3>This is an element where click should work!</h3>

<div id="notME">
<h3>In this point it should not work!</h3>
</div>

</div>

I want the onlick to be triggered only in the div clicking.

Please check the example live @ http://modacalcio.com/HtmlProblemForm.html

The click is triggered everywhere, expecially in the form input.

Obiovusly I wish to use this without deleting onclick in children nodes, as they have their own onclick that still need to work

Also with jquery I have same problem
any help?

Answer 1

$('#onlyMe').on('click', function(evt) {
    if ($(evt.target).parents('#notME').length === 0 && evt.target.id !== 'notME') {
        location.href = "http://...";
    }       
});

example fiddle: http://jsfiddle.net/zhkr2/2/

the idea is to check if the event was triggered on #notME element or inside an element contained in #notME, so I check if an ancestor is that element