Question

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

它适用于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;
}

Answer 1

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

webkit浏览器（Safari，Chrome）需要强制重绘。在描述的情况下，“click”事件正常工作并更改了元素类。但浏览器并没有根据改变的类的新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)');}

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

1 个答案: