Javascript与onclick和onmouseout冲突

时间：2012-12-27 03:19:17

标签： javascript events

嗨，谢谢你看我的帖子。我对脚本非常陌生，而且我遇到了一个我无法弄清楚的简单问题。所以......

当我按下按钮时，我有一个冻结的按钮，它的“onclick”功能不会被触发。有一个“onmouseout”函数导致了这个，但我不知道为什么。

我想将“onmouseout”和“onclick”功能应用于一个按钮，但它不起作用。请看我的代码：

使用Javascript：

function popup() 
{
    alert("Hello World")
}

function pop2() 
{
    alert("Good job")
}

function pop3() 
{
    alert("CLICK ME!")
}

HTML：

<input type="button" onclick="popup()" value="Hello World">
<input type="button" onclick="pop2()" onmouseout="pop3()" value="click me">

3 个答案:

答案 0 :(得分：4)

调整代码以隔离并提供正在进行的操作的详细信息，我已准备好以下内容：

<强> http://jsfiddle.net/238Nz/8/

  

在此部分下方跳过答案。这适用于Mark。

     

让我们忽略使用on*属性添加处理程序是否优于 $ 。另外，让我们使用一些日志来检查订单。我正在使用console.log()向浏览器的Javascript控制台发送消息。在Firefox中，我使用Firebug，Chrome有一个内置控制台。在两者中，右键单击页面并Inspect Element，然后为这些测试选择Console选项卡。

     

还有一件事：jsFiddle起初可能有点复杂。底部左侧窗格中的Javascript实际上是在 head块上方 input（和body标记内）来源。右键单击底部，右侧（View Source）窗格中的Result，您将看到浏览器正在使用的内容。它就像你自己的示例HTML文档一样，只是为jsFiddle重新排序。但是，尽量不要混淆它是如何工作的。

我用来测试你的问题的标记如下：

<input type="button" onclick="doclick()" onmouseout="domouseout()" value="Click">

注意我明确标记了我的功能并使用描述性错误消息。这有助于我通过在代码和消息日志信息中嵌入该详细信息来跟踪发生的事情。始终尝试在标签（function，var，日志信息等）中进行描述，而不是执行yay!或what happened之类的操作。一旦你的脚本变得越来越复杂，它就太难以理解了。

接下来，我使用以下函数缩小范围并一致地复制相同的操作：

function popup(msg) {
    // Note, console.log is first here. This is so that the
    // alert does not "steal" focus before I get any result.
    console.log(msg);

    // Now, let's try the alert. Notice, the same msg is used.
    alert(msg);
}

这允许我从两个事件处理程序按特定顺序调用console.log 和 alert。接下来，我建立了两个事件处理函数：

function doclick() {
    popup('onclick fired');
}

function domouseout() {
    popup('onmouseout fired');
}

请参阅，他们只需使用针对操作的日志消息调用popup() 应该发生的事情。由于alert设计用于＆＃34;焦点＆＃34;对用户和阻止互动，这似乎是＆＃34;冻结＆＃34;浏览器框架。

我接下来要做的是在不同的浏览器中尝试这个。 始终尝试在不同的浏览器＃中进行复制和测试。在这种情况下，我注意到两者之间存在很大差异......

  • Chrome ：不阻止处理; alert onmouseout alert console.log Ok alert input doclick <{1}} domouseout() 和，我将鼠标指针移离onclick元素。这似乎是预期的结果。右

  • Firefox（17.0.1）：Firefox确实显示了您正在描述的行为。请注意，当我点击该按钮时，我同时获得名为的console 和 log 。所以Firefox正在检测alert，因为鼠标指针离开按钮，你得到了＃34;冻结＆＃34;。如果您看到Ok，则会立即看到onmouseout两个alert，而您似乎没有onclick与之互动（点击alert）。< / p>

  • IE（7-9,9兼容性视图）：IE当然提供了一个有趣的插图。例如，当我单击IE9中的按钮时，我看到：

    onmouseout alert is on top of onclick alert???

    http://i.imgur.com/sWXWm.png

    当然似乎与Firefox有相同的效果 ...但由于某些原因，使用Firefox，onmouseout - 解雇alert并不专注于顶部console.log - 被解雇onclick。 IE 7-9加上兼容性视图都表现出这种特殊的行为，略有不同。

  • Opera（12.02）：Opera不会触发alert - 触发input或onmouseout消息，直到之后 onclick - 已解雇alert和日志消息， 和 您移动鼠标（假设您已将其移出{单击后单击{1}}按钮元素。这看起来很奇怪，但比Firefox和IE行为更可口。也许我错了。

那么发生了什么？我不太确定，但我认为[Enter]阻止了onclick onmouseout关注用户。如果您在onmouseout冻结时点按alert，则会收到<input onclick="doclick()"...>提醒，但不会收到{{1}}。 Chrome在这里看似正确; Firefox＆＃34; popunder＆＃34;警报似乎，好吧，有点腥。

总之，在这种情况下，至少两个事件的行为不仅仅是对Firefox的特定。什么似乎特定于Firefox（至少17.0.1）是{{1}} - 解雇{{1}}无法正确聚焦的事实，并且页面＆＃34;出现冻结＆＃34;。这似乎是一个错误。我想知道它是否被报道了？

  

<子> 的 $    使用内联属性事件处理程序（例如{{1}}）通常通常一个好主意，但是请忽略它旁边的内容。指向这里。请参阅MDN＆＃39; DOM Event documentation，特别是HTML attribute section，并意识到这有点比在这里值得进行更为棘手和详细。

     

<子> 的＃    如果你继续在浏览器中使用Javascript，你会发现IE是......特别的。它在历史上有一个特殊的地方，所以很奇怪或者＃34;异常＆＃34;使用IE版本检查代码时，行为并不罕见。就个人而言，我建议在Firefox或Chrome中学习和工作，然后在IE和其他浏览器中检查它的工作原理。

答案 1 :(得分：2)

使用Javascript：

var clicked = false;
function popup() 
{
    alert("Hello World")
}

function pop2(ev) 
{
    alert("Good job");
    clicked=true;
}

function pop3() 
{
    if(clicked == false)
    {
        alert("CLICK ME!");
    }
    clicked=false;
}

HTML：

<input type="button" onclick="popup()" value="Hello World">
<input type="button" onclick="return pop2(event)" onmouseout="pop3()" value="click me">

link to demo

答案 2 :(得分：1)

由于点击事件期间由于聚焦不良而导致点击和mouseout / mouseleave事件在FireFox上很快发生，因此我们可以为mouseout / mouseleave事件期间处理的代码添加一种延迟。以下对我有用：

//Bind the element with classname to a function on click event
$(".rej").bind("click", showData);
//Bind the same element with classname to another function on mouseout event.
$(".rej").bind("mouseout", hideData);

然后您可以继续使用showData函数。但是在hideData函数中，您需要在处理该函数中的代码之前添加几秒的延迟，如下所示：

function showData() { 
//Do something
}

function hideData() {
var delay = 1000;
setTimeout(function(){
//Do something
}, delay);
}

你很高兴。 mouseout事件不再超过Firefox中的click事件。 :)：）

相关问题
最新问题