4

我有一个 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”的左侧。您会看到该事件没有触发。虽然这是一个很小的区域，但似乎我几乎每次都点击它。

我已经尝试了一切。我猜这只是文本节点接受点击的问题，它没有传播到它的父节点？有什么想法可以解决这个问题吗？

4

2 回答 2

4

问题似乎是选择文本的“尝试”。

将此添加到您的 CSS 中：

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

小提琴更新为我在 chrome 中工作：

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

也只是一个想法。您可以将其从正文更改为任何内容，以防止您的“按钮”文本被选择。

更新：

告诉我你能不能打破这个！我也没办法。基本上我删除了填充，声明了高度和宽度，将 Close 包裹在一个<div>名为的类中.label并设置了它的边距。

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

新JS：

.label{
    margin: 5px;
}

新的 HTML：

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

.button从和中删除了填充 CSS .button:active。

于 2013-02-21T18:17:09.333 回答
1

尝试从 :active 事件中删除填充更改。我认为在您单击文本时移动文本的开头会导致一些奇怪的行为。我承认它改变了按钮的外观，这有点蹩脚。

另外，尝试使填充非常高（如padding:60px 90px 40px 110px;）。您应该看到单击文本本身的任意位置似乎将其视为拖动操作而不是单击操作。

顺便说一句，这也发生在 Windows 的 Safari 中，所以我猜这是 WebKit 的事情。

可能值得提交错误报告。

于 2013-02-21T19:13:25.727 回答