Webkit 浏览器：单击事件处理程序无法正常工作答案

【问题标题】：Webkit browsers: click event handler doe not work properlyWebkit 浏览器：单击事件处理程序无法正常工作
【发布时间】：2012-10-24 07:25:37
【问题描述】：

在我的界面中为按钮“选择所有项目”触发了“点击”事件。此点击事件会触发一个动作以突出显示所有带有红色背景的项目。

它在 Firefox、Opera、IE 中运行良好，但在 Safari 和 Chrome 中却不行。在这些 webkit 浏览器中，单击“全选”按钮后不会出现红色背景。出现背景按钮单击后需要将项目悬停。

您能提出任何解决方案吗？

有我的一段js代码：

events: {
        'click .select-all-btn': 'selectAll'
    },
selectAll: function() {
        this.$('.nodebox').addClass('node-to-' + this.action + 'checked').removeClass('node-to-' + this.action + '-unchecked');
    },

还有一个合适的css：

.node-to-delete-checked .node-select
{
    display: block;
    background-color: rgba(121, 0, 0, 0.25);
}

.node-to-delete-unchecked .node-select
{
    display: none;
}

【问题讨论】：

您在checked 前面缺少-。也许这只是一个错字。
您使用的是 jquery、prototype 还是其他框架？这不是很清楚......
是的，这是一个错字，抱歉。我正在使用 Backbone 框架。

标签： javascript google-chrome safari webkit click

【解决方案1】：

这是一篇很有用的文章：http://mir.aculo.us/2009/09/25/force-redraw-dom-technique-for-webkit-based-browsers/

webkit 浏览器（Safari、Chrome）需要强制重绘。在所描述的情况下，“单击”事件正常工作并更改了元素类。但是浏览器并没有根据新的 css 样式重新绘制它以用于更改的类。

解决问题有个小技巧：

element.style.webkitTransform = 'scale(1)';

对于我的 Backbone 代码，它将是：

selectAll: function() {this.$('.nodebox').addClass('node-to-' + this.action + 'checked').removeClass('node-to-' + this.action + '-unchecked').css('webkitTransform', 'scale(1)');}

【讨论】：