防止默认行为不起作用答案

【问题标题】：prevent default behavior not working防止默认行为不起作用
【发布时间】：2013-05-09 18:28:58
【问题描述】：

我试图阻止没有像 jQuery 这样的 JavaScript 库的动态图片库的默认操作。这是项目-http://the-session.co.uk/JSgallery/ 当我不想要链接时，链接似乎仍在将用户带到链接的目的地。我在我的 HTML 标记中使用内联事件处理程序 onclick 来调用该函数。

<a href="images/tuco.jpg" onclick="showPic(this)" title="Tuco">Tuco Salamanca</a>

功能：

function showPic(whichpic) { 

    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 

    var event = window.event;
    if(event.preventDefault) {
        event.preventDefault(); // handles most browsers
    }
    else {
        return false;          // handles ie
    }
}

单击鼠标时，此错误会在控制台中显示片刻：

现在肯定已经在上面一行定义了事件：var event = window.event; 有什么解决问题的建议吗？

【问题讨论】：

var event = window.event; 行仅适用于 IE。最好不要使用内联事件处理程序方法，而是使用theElem.onclick=function(evt) { var e = window.event || evt }

标签： javascript

【解决方案1】：

window.event 对象只存在于 Internet Explorer 中，不存在于其他浏览器中。

在其他浏览器中，事件作为参数传递给处理事件的函数。

你真正想要的是这样的：

<a href="images/tuco.jpg" onclick="showPic(event)" title="Tuco">Tuco Salamanca</a>

和

function showPic(e) { 

    if (!e) var e = window.event;

    var whichpic = e.target

    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 

    if(e.preventDefault) {
        e.preventDefault(); // handles most browsers
    }
    else {
        return false;          // handles ie
    }
}

Quirks Mode 有一个很好的概述。

FWIW：事件处理规范化是使用 JavaScript 库或框架带来的最大优势之一。看看jQuery、Dojo、Prototype等等等等。

【讨论】：

【解决方案2】：

当您在href 中使用onclick 时，您必须跟随return false; 的操作，否则href 将在onclick 操作完成后跟随。

不要使用onclick 并内联您的事件，而是考虑使用基于id 的JavaScript 事件处理。我绝对推荐使用 jQuery 之类的库。事件处理是微不足道的，就像这样......

$('#someid').click(function() { alert('hi') });

即使使用原生 JavaScript，这也比在 HTML 中乱扔onclick...

document.getElementById('someid').click = function() {
    alert('hi');
}

【讨论】：

【解决方案3】：

试试这个：

<a href="images/tuco.jpg" onclick="showPic(event,this)" title="Tuco">Tuco Salamanca</a>

和：

function showPic(event, whichpic) { 

    var source = whichpic.getAttribute("href");  
    var placeholder = document.getElementById("placeholder"); 
    placeholder.setAttribute("src",source); 

    if(event.preventDefault) {
        event.preventDefault(); // handles most browsers
    }
    else {
        return false;          // handles ie
    }
}

【讨论】：

【解决方案4】：

window.event 可能未定义，这就是您的变量未定义的原因。看看这个问题是否有助于解决您的问题：Why FF says that window.event is undefined? (call function with added event listener)

【讨论】：

【解决方案5】：

我一直在玩类似的问题，发现这个解决方案有效：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<a id="mylink" href="http://www.*.com/" target="_blank">Go to SO.</a>
<script>
var linkClicked = false;

window.onload = function()
{
    document.getElementById("mylink").onclick = function(e)
    {

        if (!e) var e = window.event;
        if (!linkClicked)
        {
            linkClicked = true;
            // Add code to change appearance of link so that people will know not to click it.

        }
        else
        {

                if(e.preventDefault) 
                {
                    e.preventDefault(); // handles most browsers
                }
                else
                {
                    return false;          // handles ie
                }
        }   
    }
}    
</script>

</body>
</html>

在此示例中，链接将起作用并打开一个新窗口一次。所有进一步的点击都将无效。

我建议您添加样式以使链接不再有效。

我从 Dancrumb 的回答中得到了帮助，所以如果你喜欢这个，也喜欢那个！

【讨论】：