Как я могу показать, что ссылка на изображение отключена, используя как события указателя, так и свойства курсора?

Скрипка

У меня есть изображение, завернутое в якорь, на котором есть действие щелчка (простой случай в приведенной выше скрипке).

В определенное время это действие недействительно, поэтому я хотел бы сделать 3 вещи:

  1. серое изображение (-webkit-filter: инвертировать (40%);)
  2. отключить событие щелчка (события указателя: нет;)
  3. изменить курсор (курсор: не разрешено;)

Выделение изображения серым всегда работает, но кажется, что события указателя и свойства курсора не очень хорошо сочетаются друг с другом.

При применении как свойств указателя, так и свойства курсора я ожидаю, что действие будет отключено И курсор изменится, но похоже, что свойство событий указателя переопределяет мою способность устанавливать курсор.

Как правильно это сделать?

Код:

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;
}

html css pointer-events javascript-events
person Jer    schedule 21.10.2014    source источник
comment
Как вы применяете класс no-click? JavaScript?   -  person Turnip    schedule 22.10.2014
comment
На самом деле, используя атрибут ng-click в Angular, но я просто пытаюсь дать более упрощенный случай.   -  person Jer    schedule 22.10.2014

Ответы (2)


arrow_upward
3
arrow_downward

EDIT: установите обертку divs на display: inline-block;

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

Оберните свой элемент в div с 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%);
}

Это сработало для меня

person Berthy    schedule 21.10.2014
comment
Спасибо - я видел пример, где это работает. К сожалению, изображения, к которым это относится, находятся в неразрывной горизонтальной строке, поэтому я не думаю, что смогу использовать div. Я попытался установить настройку display:inline для div, и поведение возвращается к тому, как оно работает с промежутками (я думаю, ожидалось). - person Jer; 22.10.2014
comment
Я отредактировал скрипку и CSS: display: встроенный блок, похоже, работает с div - person Berthy; 22.10.2014
comment
Ах, спасибо! Так что inline не работает, а inline-block работает. Потрясающий. - person Jer; 22.10.2014

arrow_upward
3
arrow_downward

pointer-events: none блокирует любое взаимодействие с курсором, поэтому cursor: not allowed никогда не срабатывает.

Поскольку pointer-events: none не очень хорошо поддерживается IE (http://caniuse.com/#feat=pointer-events), я бы сказал, что безопаснее удалить поведение щелчка в javascript либо с помощью другого прослушивателя событий, либо при добавлении класса no-click.

Fiddle — Fiddle делает это с классом без щелчка, но производительность будет лучше, если вы можете прикрепить его прослушиватель событий для класса-оболочки.

$('.wrapper-class').on('click', '.no-click', function(e) {
    e.preventDefault();
})
person cjspurgeon    schedule 21.10.2014
comment
Спасибо, посмотрю что-нибудь подобное. К счастью, это внутреннее приложение, в котором требуется поддержка только Chrome. - person Jer; 22.10.2014