I have a div container, where for some reason I have to add e.preventDefault(), but surprisingly it stops the anchor elements to do their job as well

jQuery('#anything').on("click", function(e) {
  e.preventDefault();
});

<script src=".1.1/jquery.min.js"></script>

<div id="anything">
  <a href=""> Link should work </a>
</div>

I have a div container, where for some reason I have to add e.preventDefault(), but surprisingly it stops the anchor elements to do their job as well

jQuery('#anything').on("click", function(e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
  <a href="https://google."> Link should work </a>
</div>

I didn't expect that anchor won't work, I never had to deal with this before. I tried StopPropagation() as suggested somewhere, But that didn't work

How can I make the anchor working again?

• javascript
• jquery
• html

• can you explaing why are you using preventDefault() ?? – Jagdeesh Kumar Commented Jul 30, 2018 at 7:28
• Can you elaborate a bit on the purpose of this logic? It’s hard for me to understand what’s happening besides the anchor’s event being canceled. Looks like there is something more happening that is not in the code you show. Does the #anything element has its own logic on top of cancelling the event? – rishat Commented Jul 30, 2018 at 7:29
• @ri-chan your questions are right, using preventDefault() doesn't seem to very sensible on div, I have a div which includes many forms and those forms shouldn't be submitted until user takes particular action, But the links in that div should work, I think there can be better logics but i was curious about this as well – nikhil123 Commented Jul 30, 2018 at 7:39
• Not sure why you are using e.preventDefault(); if "Link should work". However if you are trying to prevent any parent event handlers from being executed e.stopPropagation(); should be it – Hil Commented Jul 30, 2018 at 9:29
• Yeah, But e.stopPropagation(); should be applied the child element for whom we want to escape preventDefault() (in my case anchor), not to the parent element (in my case div#anything). it has been explained in answers, – nikhil123 Commented Jul 30, 2018 at 9:45

3 Answers 3

One option would be to use event delegation and exclude all as from triggering the listener:

jQuery('#anything').on("click", '*:not(a)', function(e) {
  e.preventDefault();
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
  <a href="https://google."> Link should work </a>
</div>

Or if you want to make sure that no clicks inside children of #anything trigger the listener, put #anything as the delegation selector instead. In native Javascript this time:

document.querySelector('#anything').addEventListener('click', (e) => {
  console.log('listener running');
  if (!e.target.matches('#anything')) return;
  console.log('prevented default');
  e.preventDefault();
});
  

<a href="www.google." id="anything">Parent A<span>Child Span</span></a>

(though, preventDefault() on just a div doesn't much sense..?)

Use e.stopPropagation(); method on your child elements.

jQuery('#anything').on("click", function(e){
	      e.preventDefault();

        });
jQuery('#a1').on("click", function(e){
           e.stopPropagation();
        });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
    <a href="https://google." id="a1"> Link should work </a>
 </div>

   

To stop preventDefault() to pass to all child element, you have to use stopPropagation on all children's clicked

jQuery('#anything').on("click", function(e){
    e.preventDefault();
 }).children().click(function(e) { // catch all children click
    e.stopPropagation();
 });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="anything">
    <a href="https://google."> Link should work </a>
 </div>