CODEWITHSUNDEEP
javascripthtmljquerydom-events
jumpman8947
jumpman8947

Reputation: 437

Javascript preventDefault operation

I'm just practising some JavaScript and I came across an error I can't get around. I have a list in my html where each item links to a page, but I have a function in my js script where when I click the item its supposed to remove the item from the list, I'm trying to use preventDefault() but it still takes me to that link.

<ul id="shoppingList">
        <li class="complete"><a href="google.com><em>fresh</em>tuna</a></li>
        <li class="complete"><a href="google.com">meatball</a></li>
        <li class="complete"><a href="google.com">kiwi</a></li>
        <li class="complete"><a href="google.com">chicken soup</a></li>
    </ul> 

function getTarget(e){
if(!e){
    e = window.event;
} 
return e.target || e.srcElement;}

function itemDone(e){
//Remove item from the list
var target;
var Parent;
var Grandparent;
target = getTarget(e);
Parent = target.parentNode;
Grandparent = target.parentNode.parentNode;
Grandparent.removeChild(Parent);

//Prevent the link from taking you somewhere
if(e.preventDefault){
    e.preventDefault();
}else{
    e.returnValue = false;
}
}

//Set up event listeners to call ItemDone() on click
var Shoppo = document.getElementById('shoppingList');
if(Shoppo.addEventListener){
Shoppo.addEventListener('click',function(e){
    itemDone(e);
},flase);
}else{
Shoppo.attachEvent('onClick',function(e){
    itemDone(e);
});
}

Upvotes: 0

Views: 14467

Answers (4)

Claudio Klemp
Claudio Klemp

Reputation: 61

I found myself in the situation, that

ev.preventDefault();
ev.stopPropagation();

and even

document.onclick= function(ev){ev.preventDefault(); ev.stopPropagation(); return false;}

did not help at all

as I used touchstart, touchend, touchmove to create mousedown, onmouseup and mousemove events.

On desktop, there was no issue, but using the same code on mobiles, everything doubled (sometimes on the same call ???) in the console.

I could solve the problem with this code :

var clickUpMouseEventTimer = 0; 

function clickUp(ev) {
   ev = ev || event;

   console.log('clickUp mouse timer' ,ev['timeStamp'], ev['timeStamp'] -clickUpMouseEventTimer)

   if( clickUpMouseEventTimer + 200 < ev['timeStamp']) {
       clickUpMouseEventTimer = ev['timeStamp'];
   } else {
       return;
   }

This way I could intercept whatever mousedown or mouseup event, if fired doubled by measuring :

ev['timeStamp'],

and decide by offering a latency of 200ms (this depends on your program execution time), wether to drop the input or let it pass the function.

The magic worked finest and desktop and mobile are doing now exactly the same steps (except the touch to mouse event translator).

Hope it can help, as you guys did help me a lot and many times with your experiences and knowledge.

Upvotes: 0

VPK
VPK

Reputation: 3090

To check if the e.preventDefault() was called, you can use isDefaultPrevented which returns true or false. So you can change your code like this,

e.preventDefault();
if(e.isDefaultPrevented()){
    // default event is prevented
}else{
    e.returnValue = false;
}

Upvotes: 6

Luke Digby
Luke Digby

Reputation: 21

Change this :

if(e.preventDefault){
    e.preventDefault();
}else{
    e.returnValue = false;
}

to this:

e.preventDefault();
return false;

This will work, and save you a couple of lines of code.

Upvotes: 2

Revent
Revent

Reputation: 2109

If you don't want the browser to follow the link but still need the url, you could store it in in a different attribute and set the href to #.

<a href="#" id="link1" destinationurl="www.google.com" ... />

Then you could use the getAttribute function to retrieve the value

document.getElementById("link1").getAttribute("destinationurl");

Upvotes: 1

Related Questions