How to change e.preventDefault() from disabling links of children anchor?

Question

Say we have HTML structure like this:

<ul id="dropdown-download-links">
  <li>
    <a href="foo.html">Foo</a> <!-- Don't want this clickable, but cannot remove it -->
    <ul>
      <li><a href="bar.html">Bar</a></li>
      <li><a href="baz.html">Baz</a></li>
   </ul>
 </li>
 <li><!-- .. same style structure here .. --></li>
 <li><!-- .. same style structure here .. --></li>
</ul>

So you click on Foo and then it toggles Bar and Baz both of which SHOULD be clickable as target=_blank pdf documents. The obvious problem is because of e.preventDefault() none of the links work as they should. The relevant jQuery is here:

$(document).ready(function() {
  $("ul#dropdown-download-links > li > a").unbind().click(function(e) {
    e.stopPropagation();
    var ulContainer = $(this).closest("li").find("ul");
    $(ulContainer).slideToggle();
  });
});

Can anyone see a way in which the Bar and Baz links would work despite using e.preventDefault()? So that the original parents which were themselves supposed to be links act as clickable elements that unfold the new links?

With the code you've shown, Bar and Baz would not be affected because they do not match the selector passed to the event registration, `ul#dropdown-download-links > li > a`. — Mitya, Dec 31 '19 at 19:28
The HTML is just an example, I can re-examine but I think the selector still doesn't match the children links which are not working. — HelloWorld, Dec 31 '19 at 19:29
Well we can only help based on the code you post. But right now, that JS has nothing to do with those Baz and Bar links, so the question is void. If those links aren't working, it's for another reason that wouldn't be clear without seeing your actual, wider code. — Mitya, Dec 31 '19 at 19:30
The most accuarete example of the code is this fiddle: https://jsfiddle.net/o8fdhke5/1/ — HelloWorld, Dec 31 '19 at 19:30
The black boxes (which normally are much smaller icons and have some text would be clickable but as you can see they are not. It conveys the same problem. — HelloWorld, Dec 31 '19 at 19:31
Sure, but Fiddles are supplementary. In order to help you, it's reasonable to expect all relevant information to be in the question :) — Mitya, Dec 31 '19 at 19:31
There's no `preventDefault()` in your code shown here. `stopPropagation()` does something different. `unbind()` is also likely unnecessary, if it's truly being run on document ready. — Heretic Monkey, Dec 31 '19 at 19:48
@HelloWorld your jsfiddle works fine, watch your console, maybe there are errors, as i saw on jsfiddle links don't work because they are linked on your local webserver and they are blocked by a browser for `mixed content`, the links have `HTTP` but page is loaded by `HTTPS`. — Ivan Karaman, Dec 31 '19 at 20:32

score 1 · Answer 1 · answered Dec 31 '19 at 19:33

1

I am sure there are better ways to do it but you could try to just remove the href attribute tag with 'removeAttribute("href")'

Source: https://stackoverflow.com/a/17387382/11697704

answered Dec 31 '19 at 19:33

dr_nyt

323
4
10

This is the best answer and the only that I will think that'll work with my rigid serve fed structure. Is there an easy jQuery alternative to it? – HelloWorld Dec 31 '19 at 19:34
This link sums it up quite well: https://www.tutorialrepublic.com/faq/how-to-remove-attribute-from-an-html-element-in-jquery.php – dr_nyt Dec 31 '19 at 19:42
IMO, if a vanilla JS method works for the job, there's no need to resort to a big library like jQuery to do the same thing – CertainPerformance Dec 31 '19 at 19:43

Scott Marcus · Answer 2 · 2019-12-31T20:44:56.673

1

How about a simple CSS solution using pointer-events?

// Set the event handler on the <li>, not the <a>
$("ul#dropdown-download-links > li").click(function(e) {
  $(this).find("ul").slideToggle();
});

a[href="foo.html"] { pointer-events:none; } /* Now, it can't be clicked! */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="dropdown-download-links">
  <li>
    <a href="foo.html">Foo</a> <!-- Don't want this clickable, but cannot remove it -->
    <ul>
      <li><a href="bar.html">Bar</a></li>
      <li><a href="baz.html">Baz</a></li>
   </ul>
 </li>
 <li><!-- .. same style structure here .. --></li>
 <li><!-- .. same style structure here .. --></li>
</ul>

edited Dec 31 '19 at 20:44

answered Dec 31 '19 at 19:52

Scott Marcus

64,069
6
49
71

it will remove click event for sliding children – Ivan Karaman Dec 31 '19 at 19:57
my typo, sorry, he wants to click on a link but this CSS will disable click event, that will not work for this case – Ivan Karaman Dec 31 '19 at 20:04
@IvanKaraman I don't think you've read the requirements. He does NOT want the link to be clickable. Look at his own comment next to it. – Scott Marcus Dec 31 '19 at 20:06
I saw his jsfiddle example, this link is for opening a dropdown menu, but I like your answer, I didn't think about this CSS prop as a solution... – Ivan Karaman Dec 31 '19 at 20:37
@IvanKaraman If that's the case, the event can just be added to the `li` parent, rather than the `a`. Answer updated. Problem solved. – Scott Marcus Dec 31 '19 at 20:41

Ivan Karaman · Answer 3 · 2019-12-31T19:54:25.210

You should use the children method instead > it's better for performance, this code doesn't have an affect on children links, you sure that problem in this code?

solution with removing attr href will not work for you, because these links will reload a page...

$(document).ready(function() {
  $("ul#dropdown-download-links").children('li').children('a').click(function(e) {
    e.preventDefault();
    $(this).next("ul").slideToggle();
  });
  
  // empty href attr doesn't prevent page reload
  const $second = $("ul#dropdown-second");
  if($second.length) {
    $second.children('li').children('a').attr('href', '');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h2>With 'preventDefault'</h2>
<ul id="dropdown-download-links">
  <li>
    <a href="foo.html">Foo</a> <!-- Don't want this clickable, but cannot remove it -->
    <ul>
      <li><a href="bar.html">Bar</a></li>
      <li><a href="baz.html">Baz</a></li>
   </ul>
 </li>
 <li><!-- .. same style structure here .. --></li>
 <li><!-- .. same style structure here .. --></li>
</ul>
<h2>With removed 'href' attribute</h2>
<ul id="dropdown-second">
  <li>
    <a href="foo.html">Foo</a> <!-- Don't want this clickable, but cannot remove it -->
    <ul>
      <li><a href="bar.html">Bar</a></li>
      <li><a href="baz.html">Baz</a></li>
   </ul>
 </li>
 <li>
    <a href="foo.html">Foo</a> <!-- Don't want this clickable, but cannot remove it -->
    <ul>
      <li><a href="bar.html">Bar</a></li>
      <li><a href="baz.html">Baz</a></li>
   </ul>
 </li>
 <li>
    <a href="foo.html">Foo</a> <!-- Don't want this clickable, but cannot remove it -->
    <ul>
      <li><a href="bar.html">Bar</a></li>
      <li><a href="baz.html">Baz</a></li>
   </ul>
 </li>
 <li><!-- .. same style structure here .. --></li>
 <li><!-- .. same style structure here .. --></li>
</ul>

How to change e.preventDefault() from disabling links of children anchor?

3 Answers3