2

小提琴

我有一个包裹在一个锚点中的图像，该锚点上有一个点击动作（一个简单的案例在上面的小提琴中）。

在某些时候，这个动作是无效的，所以我想做三件事：

  1. 使图像变灰 ( -webkit-filter: invert(40%);)
  2. 禁用点击事件 ( pointer-events: none;)
  3. 更改光标 ( cursor: not-allowed;)

将图像变灰总是有效的，但似乎指针事件和光标属性不能很好地结合在一起。

当同时应用指针事件和光标属性时，我希望该操作被禁用并且光标会改变 - 但似乎指针事件属性覆盖了我设置光标的能力。

这样做的正确方法是什么？

代码：

No styles  <br>
<a href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
pointer-events: none (good - I cannot click) <br>
<a class="grey no-click-1" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
cursor: not-allowed (good - I can click, but the cursor has changed) <br>
<a class="grey no-click-2" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
pointer-events: none AND cursor: not-allowed (bad - I can't click but the cursor has NOT changed)<br>
<a class="grey no-click-3" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>


img {
    height: 80px;
}

.grey {
    -webkit-filter: invert(40%);    
}

.no-click-1 {
    pointer-events: none;
}

.no-click-2 {
    cursor: not-allowed;
}

.no-click-3 {
    pointer-events: none;
    cursor: not-allowed;
}
4

2 回答 2

3

编辑： 将包装divs 设置为 display: inline-block;

http://jsfiddle.net/o8bjr3eL/4/

将您的元素包裹在 adiv中，cursor: not-allowed;并且孩子a拥有pointer-events: none;

html:

<div class="not-allowed">
        <a class="no-click" href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
</div>

编辑： CSS：

.not-allowed{
    cursor: not-allowed;

    display: inline-block; /* This is working */

}
.no-click {
    pointer-events: none;
    -webkit-filter: invert(40%);
}

这对我有用

于 2014-10-21T20:26:20.250 回答
3

pointer-events: none阻止所有与光标的交互，因此永远cursor: not allowed不会触发。

因为IE ( http://caniuse.com/#feat=pointer-eventspointer-events: none ) 对它的支持不是很好，所以我会说通过另一个事件侦听器或添加类时删除 javascript 中的点击行为更安全。no-click

Fiddle - Fiddle 使用无点击类执行此操作，但如果您可以将一个事件侦听器附加到包装类，性能会更好。

$('.wrapper-class').on('click', '.no-click', function(e) {
    e.preventDefault();
})
于 2014-10-21T23:29:33.433 回答