0

您好，感谢您查看我的帖子。我对脚本很陌生，我遇到了一个我无法弄清楚的简单问题。所以...

我有一个按钮，当我按下它时它会冻结，并且它的“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">
4

3 回答 3

4

调整您的代码以隔离并提供正在发生的事情的详细信息，我准备了以下内容：

http://jsfiddle.net/238Nz/8/

跳过这部分下面的答案。这是为马克准备的。

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

还有一件事：jsFiddle 一开始可能有点复杂。底部左侧窗格中的 Javascript 实际上放在源中（和标记）上方的head块中。右键单击底部右侧 ( ) 窗格，您将看到浏览器正在使用什么。它就像您自己的示例 HTML 文档一样，只是为 jsFiddle 重新排序。不过，尽量不要被它的工作原理所迷惑。inputbodyView SourceResult

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

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

请注意，我清楚地标记了我的函数并使用描述性错误消息。这有助于我通过在代码和消息日志信息中嵌入该详细信息来跟踪正在发生的事情。始终尝试在标签（、、日志信息等）中进行描述function，而不是像orvar之类的东西。一旦你的脚本变得更长、更复杂，就很难理解了。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()一个特定于操作的日志消息，说明应该发生的事情。由于alerts 旨在“聚焦”用户并阻止交互，这似乎是“冻结”浏览器框架的可能原因。

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

  • Chrome：不阻止处理；两者都alert开火，并且onmouseout-fired直到我点击and之后alert才会运行，然后我将鼠标指针从元素上移开。这似乎是我们想要的结果。正确的？console.logOkalert input

  • Firefox (17.0.1)：Firefox 确实显示了您所描述的行为。请注意，当我单击按钮时，我会同时得到两者doclick 并被 domouseout()调用。因此 Firefox 检测到将鼠标指针从按钮上移开，然后您就会得到“冻结”。如果您观看，您会立即看到两者都启动，并且您似乎无法与之交互（通过单击）。onclickconsolelogalertOk

  • IE (7-9, 9 Compatibility View)：IE当然提供了一个有趣的例子。例如，当我单击 IE9 中的按钮时，我看到：

    onmouseout 警报在 onclick 警报之上？？？

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

    当然，这似乎与 Firefox 具有相同的效果......但由于 Firefox 的某些原因，onmouseout-firedalert并不专注于onclick-fired 之上alert。IE 7-9 plus Compatibility View 都表现出这种特殊的行为，只是略有不同。

  • Opera (12.02) ：直到-fired和 log 消息之后，Opera 才会触发 -fired 或消息，并且您移动onmouseout鼠标alert（假设您在单击后将其从 button 元素中移开）。这看起来很奇怪，但比 Firefox 和 IE 的行为更可口。不过，也许我错了。console.logonclickalertinput

那么发生了什么？我不太确定，但我认为这onmouseout阻止了onclick'salert对用户的关注。如果你[Enter]在它被冻结的时候打它，你会得到onclick警报，但不会onmouseout。Chrome 在这里似乎是正确的；Firefox 的“popunder”警报似乎有点可疑。

总之，至少这两个事件在这种情况下的行为不仅是 Firefox特有的。似乎特定于 Firefox（至少 17.0.1）的事实是-firedonmouseout没有alert正确聚焦，并且页面“似乎冻结”。这似乎是一个错误。我想知道有没有被举报？

$使用内联属性事件处理程序（如 ） 通常不是一个好主意，但让我们忽略这里无关紧要的内容。请参阅 MDN 的文档，特别是HTML 属性部分，并意识到这比这里值得介绍的要复杂和详细。<input onclick="doclick()"...>DOM Event

# 如果你继续在浏览器中使用 Javascript，你会发现 IE 是……特别的。它在历史上占有特殊的地位，因此在使用 IE 版本检查代码时，奇怪或“异常”的行为并不少见。就个人而言，我建议在 Firefox 或 Chrome 中学习和工作，然后在 IE 和其他浏览器中检查它是否有效。

于 2012-12-27T04:02:24.433 回答
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">

​<a href="http://jsfiddle.net/bLuuQ/5/" rel="nofollow">演示链接

于 2012-12-27T03:50:34.017 回答
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 事件。:) :)

于 2017-05-04T08:34:33.953 回答