javascript - Cancel click event of parent element only -


i having div structure.

<div id="parentdiv">     employee data    <a>click here</a> </div> 

parent div's click event ready registered third party plug in, not in control of me. doing validation on div click.

i want perform action on click of anchor tag 'click here', don't want perform validation, registered div click.

but when user click 'employee data' should perform validation registered click event.

i tried

<a onclick="(arguments[0]||window.event).stoppropagation();">click here</a> <a onclick="(arguments[0]||window.event).cancelbubble=true;"></a> 

but cancel own click event i.e anchor tags click event.

stoppropagation() require, need call directly on click event raised. can using jquery, this:

$('#parentdiv').click(function() {    console.log('parent clicked');  })    $('#parentdiv a').click(function(e) {    e.stoppropagation();    console.log('child clicked');  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="parentdiv">    employee data    <a href="#">click here</a>  </div>

alternatively, can use native js this:

document.queryselector('#parentdiv').addeventlistener('click', function() {    console.log('parent clicked');  })    document.queryselector('#parentdiv a').addeventlistener('click', function(e) {    e.stoppropagation();    console.log('child clicked');  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="parentdiv">    employee data    <a href="#">click here</a>  </div>


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -