單擊DIV按鈕上的事件

Question

我有一個DIV元素，我用作javascript按鈕。 它工作正常，除非我點擊某個區域，然后根本不會觸發點擊事件。 這似乎只是Chrome中的一個問題。

HTML

<div class="button">Close</div>

使用Javascript

$('.button').on('click', function(e) {
    var currentDate = new Date();
    $debug.html('Clicked: ' + currentDate.getMinutes() + ':' + currentDate.getSeconds() + ':' + currentDate.getMilliseconds());
});

http://jsfiddle.net/cellenburg/uwGK4/

單擊按鈕上的任何位置都可以正常工作，除非您單擊左側文本的確切位置。 如果是我的小提琴，請單擊字母“C”的左側。 你會看到事件沒有觸發。 雖然這是一個很小的區域，但我似乎幾乎每次都會點擊它。

我嘗試了一切。 我猜這只是文本節點接受點擊的一個問題而且它沒有傳播到它的父節點？ 有什么想法我可以解決這個問題嗎？

Answer 1

問題似乎是“嘗試”選擇文本。

將其添加到您的CSS：

body {
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

小提琴更新適用於我的chrome：

http://jsfiddle.net/uwGK4/1/

也只是一個想法。 您可以將其從正文更改為只是為了防止“按鈕”文本被選中。

更新：

告訴我你是否可以打破這個！ 我也沒能。 Basicly我除去填充，宣告hieght和寬度，包裹在一個關閉<div>一類稱為.label並設置其邊距。

http://jsfiddle.net/uwGK4/5/

新JS：

.label{
    margin: 5px;
}

新HTML：

<div class="button"><div class="label">Close</div></div>

從.button和.button:active刪除了填充CSS。

Answer 2

嘗試從：active事件中刪除填充更改。 我認為在你點擊它時移動文本的開頭會導致一些奇怪的行為。 我承認它改變了按鈕的外觀，這有點蹩腳。

另外，嘗試使填充非常高（如padding:60px 90px 40px 110px; ）。 您應該看到單擊文本本身的任何位置似乎將其視為拖動操作而不是單擊操作。

順便說一句，這也發生在Safari for Windows中，所以我猜它是WebKit的東西。

可能值得提交錯誤報告。