Javascript與onclick和onmouseout衝突

Question

嗨，謝謝你看我的帖子。我對腳本非常陌生，而且我遇到了一個我無法弄清楚的簡單問題。所以...

我有一個按鈕，當我按下它時，它的「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"> 

Answer 1

調整你的代碼隔離，並提供細節發生了什麼事情，我已經準備了以下內容：

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

---

^{_{跳過低於這部分的答案。這是爲Mark設計的。}}

^{讓我們忽略是否使用on*屬性添加處理程序不被認爲是好還是壞$。另外，我們使用一些日誌記錄來檢查訂單。我正在使用console.log()將消息發送到瀏覽器的Javascript控制檯。在Firefox中，我使用Firebug，Chrome有一個內置的控制檯。在這兩種情況下，右鍵單擊頁面上的Inspect Element，然後選擇Console選項卡進行這些測試。}

^{還有一件事：jsFiddle起初可能有點複雜。在底部，左邊的窗格中的Javascript實際上是內head塊上面input（和body標記）內的來源。右鍵單擊並在底部右側（Result）窗格中顯示View Source，然後您將看到瀏覽器正在使用的內容。它就像您自己的示例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被設計爲「關注」用戶和塊互動，這似乎是「凍結」瀏覽器框架的可能原因。

接下來我要做的就是在不同的瀏覽器中試試這個。 總是嘗試跨不同瀏覽器進行復制和測試^＃。在這種情況下，我發現兩者之間有很大的區別...

• 鉻：不會阻止處理;既alert的炮火，而onmouseout -fired alert不通過console.log直到運行後我打Ok在alert和我移動鼠標指針從input元素。這似乎是期望的結果。對？

• Firefox（17.0.1）：Firefox確實顯示您描述的行爲。請注意，當我點擊該按鈕時，我同時獲得doclick和domouseout()調用。因此，Firefox正在檢測到onclick將鼠標指針從按鈕上移開，並且您會看到「凍結」。如果你看console，你會立即看到log的火情，並且你似乎沒有與alert進行互動（點擊Ok）。

• IE（7-9,9兼容性視圖）：IE當然提供了一個有趣的例子。舉例來說，當我點擊IE9的按鈕，我看到：

  

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

  這當然似乎是Firefox是具有同樣的效果......但出於某種原因與火狐，onmouseout-fired alert不專注於頂部的onclick-fired alert。 IE 7-9加上兼容性查看所有這些特定的行爲，有輕微的變化。

• 歌劇院（12.02）：直到後的onclick -fired alert和日誌信息，和您移動鼠標Opera不火onmouseout -fired alert或console.log消息（假設你」點擊它後將它從input按鈕元素移開）。這似乎很奇怪，但比Firefox和IE的行爲更可口。但也許我錯了。

那麼發生了什麼事？我不太確定，但我認爲onmouseout阻止onclick的alert從重點向用戶。如果在凍結期間點擊了[Enter]，則會收到onclick警報，但不會收到onmouseout。 Chrome在這裏看起來很正確Firefox的「popunder」警報看起來好像很腥。

綜上所述，至少行爲，在這種情況下，兩個事件的不只有特定到Firefox。什麼似乎是特定於Firefox（至少17.0.1）是事實上onmouseout發火alert不正確聚焦，並且頁面「似乎凍結」。這看起來像一個錯誤。我想知道是否有報道？

---

_{^{$ 這不是通常一個好主意，使用內聯屬性的事件處理程序像<input onclick="doclick()"...>，但讓我們忽略了什麼是跑題了這裏。請參閱MDN的DOM Event documentation，特別是HTML attribute section，並認識到這有點棘手和詳細，而不值得進入此處。}}

_{^{＃ 如果繼續在瀏覽器中使用JavaScript，你會發現IE是......特別。它在歷史中有着特殊的地位，因此在使用IE版本檢查代碼時，奇怪或「異常」行爲並不罕見。我個人建議在Firefox或Chrome中學習和工作，然後在IE和其他瀏覽器中檢查它的工作原理。}}

Answer 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

Answer 3

由於點擊鼠標移出/其他對火狐後不久發生是由於單擊事件期間差注重鼠標離開的事件，我們可以添加一種用於將在鼠標移出/鼠標離開待處理的代碼的延遲事件。以下爲我工作：

//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事件。 :) :)