e.preventDefault() not working in javascript, but working in jQuery

Question

This code should work fine, but i don't know where it is getting stuck!

This code is very simple, and it should work, I think the problem is the 3rd parameter that is passed ("mouseup", function(){}, false)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
    document.getElementById('navlink').addEventListener("mouseup" , function(e){
        e.preventDefault();
        document.getElementById('reveal').innerHTML("Clicked");
    },false);
</script>

</body>
</html>

its should be Uppercase 'R' in document.getElementById('reveal') as your using id name for div as Reveal — Chakravarthy S M, Sep 17 '14 at 07:05
`id="Reveal"` so `document.getElementById('Reveal').innerHTML = "Clicked"` — Arun P Johny, Sep 17 '14 at 07:06
@ChakravarthySM and anup i have made another silly mistake, the code is working but it is not preventing the default function — arora, Sep 17 '14 at 07:10

score 1 · Answer 1 · answered Sep 17 '14 at 07:06

1

You have a problem with the innerHTML and the id of the div Reveal

document.getElementById('navlink').addEventListener("mouseup" , function(e){
    e.preventDefault();
    document.getElementById('Reveal').innerHTML = "Clicked";
},false);

Regards.

answered Sep 17 '14 at 07:06

Mario Araque

4,562
3
15
25

that i changed, but the problem was due to mouseup! – arora Sep 17 '14 at 07:14
Check this fiddle, is it working as you expected? http://jsfiddle.net/marioaraque/tuwcfpmj/ – Mario Araque Sep 17 '14 at 07:17
Actually if you click the link, the page loads and it wants to go to the link, but jsfiddle is preventing it. Try changing mouseup to click you will notice that the page doesn't load! – arora Sep 17 '14 at 07:21

score 0 · Answer 2 · answered Sep 17 '14 at 07:02

0

Try this,

document.getElementById('reveal').innerHTML = "Clicked";

Because innerHTML is property not a function. Also you have a typo in your code, 'Reveal' is the id of DIV.

answered Sep 17 '14 at 07:02

VPK

3,010
1
28
35

ohh man, this was a silly mistake i did there, but it is still not working for vaibhav thanks for replying, but can you identify any other issue? – arora Sep 17 '14 at 07:06

score 0 · Answer 3 · answered Sep 17 '14 at 07:07

You need the following corrections, please see the snippet below

1) .innerHtml is not a method, its a property so you must use =

2) getElementById are case sensitive so document.getElementById('reveal') must be document.getElementById('Reveal')

document.getElementById('navlink').addEventListener("mouseup" , function(e){
        e.preventDefault();
        document.getElementById('Reveal').innerHTML = "Clicked";
    },false);

<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Thanks Mahan, i changed the things you told me, but the problem was due to mouseup, i changed it to click and it is working fine now, thanks :) — arora, Sep 17 '14 at 07:16

score 0 · Accepted Answer · answered Sep 17 '14 at 07:08

0

Please try adding click event instead of mouseup.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>html demo</title>
  </head>
  <body>
    <a id="navlink" href="http://google.com">Click me</a>
      <div id="Reveal">Not Clicked</div>
    <script>
      document.getElementById('navlink').addEventListener("click" , function(e){
      e.preventDefault();
      //document.getElementById('reveal').innerHTML("Clicked");
      },false);
    </script>
</body>
</html>

answered Sep 17 '14 at 07:08

Paul Varghese

1,635
1
15
30

Thanks Paul- i replaced mouseup with click and now it is working :) Can you explain me why mouseup was not working? – arora Sep 17 '14 at 07:13
Actually in hyperlink when you click its click event and not mouseup event – Paul Varghese Sep 17 '14 at 07:17
and what is that false in the end, i thought it works with mouseup! – arora Sep 17 '14 at 07:18
It's the 3rd parameter of addEventListener juse see http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – Paul Varghese Sep 17 '14 at 07:20
Find the detailed explanation of third parameter http://stackoverflow.com/questions/17564323/what-does-the-third-parameter-false-indicate-in-document-addeventlistenerdev – Paul Varghese Sep 17 '14 at 07:22

score 0 · Answer 5 · answered Sep 17 '14 at 07:12

0

innerHTML is a property, not a mutator method. The syntax are as follows:

Return the innerHTML property: HTMLElementObject.innerHTML

Set the innerHTML property: HTMLElementObject.innerHTML=text

In your case, it should be: document.getElementById('reveal').innerHTML = "Clicked";

Also, the last parameter for the addEventListener is optional. It is a Boolean value that specifies whether the event should be executed in the capturing or in the bubbling phase.

answered Sep 17 '14 at 07:12

Pierre Nortje

716
3
8
29

ok just don't use w3schools I saw you earlier you use w3schools as references – Netorica Sep 17 '14 at 07:16
ok, i am a beginner in javascript, can you refer me some good references? – arora Sep 17 '14 at 07:19

score 0 · Answer 6 · edited May 23 '17 at 12:05

e.preventDefault does not prevent either mouseup or mousedown. Check this answer. You must use click() or addEventListener("click", to use preventDefault.

Example: document.getElementById('navlink').addEventListener("click" , function(e){

And in your code you made a mistake of using innerHTML as a function and reveal has a capital R, so the corrected form is

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
</head>
<body>
<a id="navlink" href="http://google.com">Click me</a>
<div id="Reveal">Not Clicked</div>
<script>
    document.getElementById('navlink').addEventListener("click" , function(e){
        e.preventDefault();
        document.getElementById('Reveal').innerHTML = "Clicked";
    },false);
</script>

</body>
</html>

e.preventDefault() not working in javascript, but working in jQuery

6 Answers6