how to get the anchor click with existing onclick function

Question

<div class="shareThis">
    //3rd party code start//
    <div class="social">
        <a href='https://www.google.com/' onClick='onclick()' data-provider='Abhishek'>test</a>
    </div>
</div

I want to capture the click event of the anchor tab
This anchor tag is not controlled by my code but added by 3rd party library so i can not modify the anchor tag
When user click on this anchor tag , its onclick function should work as-is. In addition to that I can also capture the click event and get the data-provider attribute value.

Want to get the value of the data-provider.

Your question is not clear. What you actually want to do? May be this can help : https://stackoverflow.com/questions/13052598/creating-anchor-tag-inside-anchor-tag — Code_Tech, Jun 29 '18 at 13:06
no My question is , this anchor tag is dynamically created by 3rd part code included in mine. It has onclick function and href as well. i also want to trigger the click of this anchor tag.How i can trigger the click of this anchor. — Abhishek, Jun 29 '18 at 13:08
@Abhishek you have pasted your html code in js panel, updated here https://jsfiddle.net/nyspatu3/6/ — Ein2012, Jun 29 '18 at 13:42
please edit your question, with clear points of what you want,i'm not able to clearly understand what you are trying to say.. — Ein2012, Jun 29 '18 at 13:44
Thanks for updating it, the section after //3rd party code start is coming from 3rd part service with entire div and anchor tag. Now i want to capture the click event of this anchor tag and get the attribute value of data-provider. But since this anchor already has onclick function so i am not able to do that,please help — Abhishek, Jun 29 '18 at 14:22
updated code https://jsfiddle.net/abhishekdixitg/t45kL7xq/4/ — Abhishek, Jun 29 '18 at 20:33

pete · Answer 1 · 2018-06-29T21:10:29.053

Just add your own event handler for the click event and do what you want there.

You state that the anchor tags are added dynamically by a script you do not control. For that reason, I recommend making your click handler a delegated handler.

document.body.addEventListener('click', function (e) {
    var target = e.target;

    if ( !(target.tagName.toLowerCase() === 'a' && target.dataset.provider !== undefined)) {
        return; // not an anchor and doesn't have a data-provider, exit the handler
    }

    // since we're here, target must be an anchor with a data-provider attribute.
    // do something with it
    var provider = target.dataset.provider;
    // your code here?
    console.log('Delegated handler running... Provider is: ', provider);
}, false); // setting useCapture to false

window.onclick = function (e) {
  // dummy function to stub the actual 3rd party function
  // and to prevent any actual navigation
  console.log('3rd-party function running...');
  e.preventDefault();
  e.stopPropagation();
  return false;
}

<div class="shareThis">
    <!-- 3rd party code start -->
    <div class="social">
        <a href="http://www.example.com" onlick="onclick()" data-provider="Abhishek">Some Link</a>
    </div>
</div>

score 0 · Answer 2 · answered Jun 30 '18 at 20:58

Try capturing click on <div class="social"> instead of anchor tag. This way, you can capture anchor tag event once abc.com is clicked.

 

document.getElementsByClassName('social')[0]
  .addEventListener('click', function(event) {
    alert("You captured anchor tag event")
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="shareThis">
//3rd party code start//
  <div class="social">
  <a onlick='onclick()' data-provider='Abhishek'>abc.com</a>
 
 </div>
 </div>

how to get the anchor click with existing onclick function

2 Answers2