CODEWITHSUNDEEP
javascripthtmlcss
Sven van Dijk
Sven van Dijk

Reputation: 23

Onclick needs to ignore parent href

I have a question, and I doubt it is possible. the question is as follows:

How can my onclick be executed without the anchor tag being activated?

The onclick will show the disclaimer message.

Sample code:

<a href="websiteurl.com">
    <div id="container">
        <div class="content-wrapper">
            <div class="image"> 
            <img src="...."/>
            </div>
            <div class="disclaimer-message">disclaimer text</div>
            <div class="text-wrapper">
                <p>Sample text</p><span onclick="this.parentNode.querySelector('div.disclaimer-message').classList.toggle('disclaimer-show');">?</span>
            </div>
        </div>
    </div>
</a>

Thanks in advance :)

Upvotes: 2

Views: 1862

Answers (4)

MaxZoom
MaxZoom

Reputation: 7763

To prevent the anchor link being invoked on click event :

  1. Assign the click listener on the highest parent possible (right after anchor tag)
  2. Prevent the event bubbling up to the anchor by invoking its preventDefault method

var container = document.querySelector('#container');

container.addEventListener('click', function(event) {
  event.preventDefault();
  var msgBlock = container.querySelector('.disclaimer-message');
  msgBlock.classList.toggle('disclaimer-show');
  msgBlock.classList.toggle('hide');
});
a {
  text-decoration: none;
}

.disclaimer-show {
  color: red;
  font-weight: bold;
}

.hide {
  display: none;
}
<a href="websiteurl.com">
  <div id="container">
    <div class="content-wrapper">
      <div class="image">
        <img src="...." />
      </div>
      <div class="disclaimer-message hide">disclaimer text</div>
      <div class="text-wrapper">
        <p>Sample text</p><span>?</span>
      </div>
    </div>
  </div>
</a>

Upvotes: 0

Jake11
Jake11

Reputation: 831

<a href="websiteurl.com">
    <p>Sample text<p>
</a>
<span onclick="this.parentNode.querySelector('div.class-message').classList.toggle('class-show');">try me</span>

Thats the way you should do it as there is no point to hold span tag inside of anchor , "this.parentNode" targets anchor element ,so querySelector won't work unless u got ur div inside of anchor

Upvotes: 0

Alexander Higgins
Alexander Higgins

Reputation: 6925

<a href="http://www.websiteurl.com">

    <p>Sample text<p><span onclick="alert('hello');return false">try me</span>

</a>

Note that when using this approach you should always wrap your script in a try catch block because if your code throws an error the parent link will be clicked.

    <a href="http://www.websiteurl.com">

        <p>Sample text<p><span onclick="try {alert('hello'); } catch(e) {}; return false">try me</span>

    </a>

Upvotes: 1

Kulix
Kulix

Reputation: 474

I would write a dedicated function to handle your click. 

<span onclick="clickHandler">...</span>

See my click handler below. If you want to prevent the default behavior of a javascript event, which in the case of a click event, you could use e.preventDefault() and e.stopPropagation().

function clickHandler(e) {
      e.preventDefault()
      e.stopPropagation()
}

This will prevent the browser from following it's default behavior which is to follow that link redirect. e.stopPropagation() will stop the event from bubbling up to its parent, which in this case is the anchor element.

Upvotes: 4

Related Questions