0

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

<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;解决问题的建议吗？

4

5 回答 5

2

该对象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
    }
}

怪癖模式有一个很好的概述。

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

于 2013-01-25T15:57:37.487 回答
1

当你onclick在 an 中使用时，href你必须跟随动作return false;，否则一旦动作完成href就会跟随动作。onclick

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

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

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

document.getElementById('someid').click = function() {
    alert('hi');
}
于 2013-01-25T15:54:40.533 回答
0

I've been having fun with a similar problem, and found that this solution works:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
</head>
<body>
<a id="mylink" href="http://www.stackoverflow.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>

In this example, the link will work and open a new window once. All further clicks will have no effect.

I would recommend you add styling to make it obvious that the link no longer works.

I got help from Dancrumb's answer, so if you like this, like that too!

于 2013-05-09T10:28:58.863 回答
0

尝试这个：

<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
    }
}
于 2013-01-25T15:56:46.073 回答
0

window.event 可能未定义，这就是您的变量未定义的原因。看看这个问题是否有助于解决您的问题：Why FF says that window.event is undefined? （添加事件侦听器的调用函数）

于 2013-01-25T15:56:57.820 回答