2013-08-20 37 views
10

jsfiddle爲什麼不能mouseUp事件預防click事件

<div class='wrapper'> 
    <button class='child'>Click me</button> 
</div> 

function h(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    e.stopImmediatePropagation(); 
    alert(e.type); 
    return false; 
} 

document.querySelector('.wrapper').addEventListener('mouseup', h, false); 
document.querySelector('.child').addEventListener('click', h, false); 

我預計這將阻止「click」事件燒製而成,但事實並非如此。但是,將mouseup更改爲mousedown確實可以防止點擊事件。

我也嘗試將useCapture參數設置爲true,並且這也不會產生mouseup所需的行爲。我已經在Chrome和Firefox上測試過了。在提交bug之前,我想我會在這裏問。

這是目前瀏覽器中的錯誤,還是它記錄的行爲?

我已閱讀W3C standard (DOM level 2),我無法找到任何可以解釋此行爲的內容,但我可能錯過了某些內容。

在我的特殊情況下,我試圖解耦兩個偵聽同一元素上的事件的代碼片段,並且我認爲使用具有優先級的部分上的捕獲事件將是解決這個問題的最優雅的方式,但後來我遇到了這個問題。 FWIW,我只需要支持官方支持的FF和Chrome版本(包括ESR for FF)。

+0

'preventDefault'和'stopImmediatePropagation'在這裏是不必要的(順便說一句),因爲沒有'

'所以沒有按鈕提交,也沒有多個相同類型的事件。我*認爲*這是預期的行爲,因爲'clickup'之前沒有'mouseup'激發?所以'.child'的'mouseup'事件在它的'click'事件之前觸發(和氣泡)(你已經停止了,但沒關係) – Ian

+0

@Ian - 我加入了這些事件來確保我沒有' t得到像「你有沒有嘗試x()或y()?」的評論。對於其他評論,將'useCapture'設置爲true會迫使'.wrapper'的mouseup發生在孩子的泡泡之前。我沒有包含這段代碼,因爲在任何情況下,我只應該得到一個alert()(帶有不同的源元素),對吧? – tjameson

+0

如果您想防止鼠標點擊,請使用以下命令:http://jsfiddle.net/zhAHt/9/ – uSeRnAmEhAhAhAhAhA

回答

0

Check out this quirksmode article

click的事件:當鼠標按下和mouseup事件發生在相同的元素

觸發。

所以,當鼠標點擊釋放,無論是mouseupclick事件被觸發,click不等待mouseup回調來完成。幾乎總是可以使用mouseupclick作爲同義詞。

爲了取消click,像你證明,你可以在mousedown事件回調從而防止click事件從以往完成返回false

+5

這是不正確的, 返回false,o event.preventPropagation將停止mouseup但沒有點擊事件。 – eveevans