Javascript 防止默认操作

Question

我只是在练习一些 JavaScript，我遇到了一个我无法解决的错误。我的 html 中有一个列表，其中每个项目 link 到一个页面，但是我的 js 脚本中有一个函数，当我单击它应该从列表中删除该项目时，我正在尝试使用 preventDefault() 但它仍然带我到那个 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);
});
}

Answer 1

要检查 e.preventDefault() 是否被调用，您可以使用 isDefaultPrevented 其中 returns true 或 false。所以你可以像这样改变你的代码，

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

Answer 2

如果您不希望浏览器跟随 link 但仍然需要 url，您可以将其存储在不同的属性中并将 href 设置为 #.

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

然后您可以使用 getAttribute 函数来检索值

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

Answer 3

改变这个：

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

对此：

e.preventDefault();
return false;

这会起作用，并为您节省几行代码。

Answer 4

我发现自己处于这种情况，

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

甚至

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

一点帮助都没有

因为我使用 touchstart、touchend、touchmove 来创建 mousedown、onmouseup 和 mousemove 事件。

在桌面上，没有问题，但在移动设备上使用相同的代码，控制台中的所有内容都翻了一番（有时在同一个调用中？？？）。

我可以用这段代码解决问题：

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;
   }

这样我就可以拦截任何 mousedown 或 mouseup 事件，如果通过测量触发加倍的话：

ev['timeStamp'],

并通过提供 200 毫秒的延迟（这取决于您的程序执行时间）来决定是丢弃输入还是让它通过函数。

魔术效果最好，桌面和移动设备现在执行完全相同的步骤（触摸鼠标事件转换器除外）。

希望它能帮到你，因为你们用你的经验和知识帮助了我很多很多次。

Javascript 防止默认操作

Javascript preventDefault operation

html

javascript

jquery

dom-events