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

问题似乎是＆＃34;尝试＆＃34;选择文字。

将此添加到您的CSS：

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

小提琴更新适用于我：

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

也只是一个想法。你可以将它从身体改为永远只是为了防止你的＆＃34;按钮＆＃34;可选择的文字。

更新：

告诉我你是否可以打破这个！我也没能做到。基本上我删除了填充，声明了hieght和width，将Close封装在<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的东西。

可能值得提交错误报告。

单击DIV按钮上的事件

2 个答案: