e.preventDefault() to prevent anchor jumping to the ID not working on anonymous function

Question

I have the following jQuery/JS that triggers some stuffs when an element is clicked:

$(tabs).click(function(e) {
    tabs.removeClass('active');
    $(this).addClass('active');

    $(tabIDs).removeClass('js_tab_area_show');
    $($(this).attr('href')).addClass('js_tab_area_show');

    e.preventDefault();
    alert('worked');
});

tabs here has been initialised before the function and has selected the elements I want to target. All the things above are already working. However, I now want to disable the anchor element (i.e. tabs in this case) from scrolling to the element with the ID that is contained within the href properties of my anchors. I tried looking around and many suggested preventDefault() to prevent scrolling. However, it did not work for me. The only difference I mostly see is they have a named function dedicated for handling click events that is called from within the click function. Mine on the other hand did the above. The alert('worked') did fire indicating the code executed until the end. What did I do wrong here?

I don't see what code is controlling the scrolling in your example. — Our_Benefactors, Feb 08 '19 at 03:07
`event.preventDefault` is not used to be stop the function right there. If you want to stop fire right before `alert('worker')`, it should be `return false`. — Kai, Feb 08 '19 at 03:07
@Kai It's not that I want to stop the function from executing there and then. I want it to prevent the `a` from scrolling to the `div` which has the same id that is contained within `a`'s `href`. Look here for more info, this is what I meant by the 'suggestion' I've found: https://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page/17950528#17950528 — Richard, Feb 08 '19 at 03:10
@WealthyPlayer so please try to `return false` at the end :D. — Kai, Feb 08 '19 at 03:12
@Kai I placed `return false;` after `alert('worked')` and it still did scroll to the `div` element. — Richard, Feb 08 '19 at 03:14
@BhushanBabar Perhaps later. I'll tag you again when I am available to recreate the problem in Codepen, tasked w/ something else for now. — Richard, Feb 08 '19 at 03:50
@BhushanBabar It oddly worked in my codepen, but not in my project. Could you roughly guess why? Codepen here: https://codepen.io/takenoteiamhere/pen/aXEXxE — Richard, Feb 08 '19 at 09:54

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

`href` Modification

Instead of over complicating your JavaScript/jQuery or CSS do the following.

<a href="#/">I DON't JUMP</a>

☝ Just add a forward slash: /

If you have a ton of links and no server-side utilities available to you see Demo 2. It has a simple JavaScript link collector.

Demo 1

h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

a {
  display: inline-block;
  height: 30px;
  font-size: 24px;
  width: 40%;
  margin: 400px 0;
}

a:first-of-type {
  color: red;
  text-align: right;
}

a:last-of-type {
  color: blue;
  text-align: left;
}

<main>
  <h1>Scroll Down</h1>
  <h2>⇩</h2>
  <a href="#">Click me.<br>I JUMP.</a>
  <a href="#/">Click me.<br>I DO NOT JUMP.</a>
</main>

Demo 2

Array.from(document.querySelectorAll('a')).forEach(lnx => {
  if (lnx.getAttribute('href') === '#') lnx.setAttribute('href', "#/");
});

h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

main {
  margin: 400px auto;
}

a:nth-of-type(odd) {
  background: #000;
  color: #fff;
}

a:nth-of-type(even) {
  color: #000;
}

<h1>Scroll Down</h1>
<h2>⇩</h2>
<main>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
</main>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 08 '19 at 05:49

zer00ne

41,936
6
41
68

If this is the case though, I see no point in using `a` at all. Admittedly, I probably shouldn't have used `a` because I'm implementing `tab`; any other element like `div` would have worked fine too with different concepts applied to my handler. So more questions: **1.** Should I change my `a` to `div`, which means tweaking my JS concept? ---- **2.** What if I still wanted to use my above code (`a` containing `href` that points to target elem) because my JS code relies much on the `href` that the targeted `a`s have? Is it possible to disable the scrolling/jumping through JS/jQuery? – Richard Feb 08 '19 at 06:06
1. No, unless you have the time to spare. 2. Depends are the hrefs being used with the `:target` selector, if so I would change that because it isn't very flexible nor that useful. 3. Yes it's possible to disable scrolling ... have you tried placing `e.preventDefault();` on the first line within the function. I always do and `e.preventDefault();` has never failed me. – zer00ne Feb 08 '19 at 06:12
1. Okay, thank you. **2.** Nope, they aren't. I'm merely running a `for` loop to get all the `href` of the `a`s and save them in `tabIDs` above that I will use for the next functions. **3.** I did, this is the main problem here. On the code above, I have already used `e.preventDefault();`, please take a look, albeit on the 3rd last line of the code. It shouldn't matter though. I also tried `return false;` as suggested by the comments to my question above. Also didn't work. – Richard Feb 08 '19 at 06:16
*"I have already used e.preventDefault();, please take a look, albeit on the 3rd last line of the code. It shouldn't matter though."* Order matters in many aspects of programming. When dealing with events there is an order in which events trigger capture propagate etc. I'd test your code but I'll need the HTML as well. – zer00ne Feb 08 '19 at 06:23
Hello, I've just placed `e.preventDefault()` as the first line to be executed within my `click` handler function. Still did not work. I'll tag you with the codepen when I have it. – Richard Feb 08 '19 at 06:39
Hello again, oddly it worked in my codepen, but not in my project. See my codepen here: https://codepen.io/takenoteiamhere/pen/aXEXxE – Richard Feb 08 '19 at 09:54
Gave some elements classes (jQuery is very versatile you can use classes easily 90% of the time). Using `data-*` attributes with `.data()` method. https://codepen.io/01/pen/PVQmzB?editors=1010 – zer00ne Feb 08 '19 at 19:37
Yes I eventually used `data-id` to imitate the `href`. I'm still REALLY CURIOUS why my `e.preventDefault()` didn't work on my code, but worked on codepen, though. Any idea why? – Richard Feb 09 '19 at 02:12
If I reviewed the code in its real environment I could most likely find the issue or at least point you in the right direction. – zer00ne Feb 09 '19 at 15:17

e.preventDefault() to prevent anchor jumping to the ID not working on anonymous function

1 Answers1

href Modification

Demo 1

Demo 2

`href` Modification