javascript - Detect which element is clicked -

in briefly, load local html page div inside other web form in asp.net.

jquery:

<script>     $(function () {         $("#includedcontent").load("../htmlholder/index.html");     });  </script>   

html:

  <div id="includedcontent" class="webholder" style="width: 450px; height: 300px; border: 1px solid #808080; margin: 0px auto; overflow-y: scroll;"></div> 

now want element's class name click on them below script:

<script>     $(document).ready(function () {         $('.webholder').on("click", "*", function (e) {              alert("class :" + $(this).attr("class"));         });     }); </script>   

my problem is, when click on element, code alert class name , it's parent!

how resolve it?

note: element not specific object, maybe it's input or button or textarea or ... .

you should use e.target(use selector) not this(because parent)

alert("class :" + $(e.target).attr("class"));

to avoid performing action on parent: can compare this , e.target validate if parent.

if( !== e.target )

code snippet demo:

$('div').on('click', function(e){        if( !== e.target ) alert( 'class '+ $(e.target).attr('class') );    });

div{    background: #fe7a15;   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div>        parent, clicking me not alert headers does, because children.    <br /><br />    <h1 class="class-header-child-one">header 1</h1>    <h2 class="class-header-child-two">header 2</h2>      </div>