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>
6 answers
solution1
1 2014-09-17 07:06:54
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.
solution2
0 2014-09-17 07:02:37
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.
solution3
0 2014-09-17 07:07:44
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
solution4
0 ACCPTED 2014-09-17 07:08:22
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>
solution5
0 2014-09-17 07:12:45
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.
solution6
0 2014-09-17 07:16:04
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.