Блог

Главная - Вопросы по программированию - Отключение событий указателя только для дочернего элемента только с помощью CSS

Отключение событий указателя только для дочернего элемента только с помощью CSS

#html #css

#HTML #css

Вопрос:

Я работаю над пользовательским скриптом для страницы, поэтому у меня нет контроля над исходным HTML. Кроме того, из-за способа загрузки страницы и работы скрипта, по разным причинам я могу использовать здесь только модификации CSS, и изменения могут быть только на уровне страницы CSS (не для атрибутов стиля каждого элемента).

Итак, проблема в том, что есть большой a элемент, в котором есть иерархия div s. Я хотел бы отключить события указателя только для одного из дочерних div элементов, оставив все в нормальном режиме везде на a . Например:

 const disableBottomPointerEventsStyle =
  '.bottom { pointer-events: none; cursor: defau< }';

$('#test').click(function () {
    $('<style/>')
        .attr('type', 'text/css')
        .text(disableBottomPointerEventsStyle)
        .appendTo(document.head);
    $(this).toggle();
});  
 .link { display: flex; width: 10ex; height: 20ex; margin-bottom: 1ex; }
.wrapper { display: flex; flex-direction: column; }
.top { border: 1px solid red; }
.bottom { border: 1px solid blue; }
div { flex-grow: 1; }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- example of page structure: -->

<a class="link" href="about:blank">
   <div class="wrapper">
       <div class="top"></div>
       <div class="bottom"></div>
   </div>
</a>

<!-- ========================== -->

<button id="test">Test</button>

В этом примере есть an a с некоторым div s в нем, и цель состоит в том, чтобы отключить события указателя только на синем div внизу, оставив все остальное как есть.

Чтобы использовать пример, нажмите кнопку Test; это вставит правило стиля в документ. Моя текущая лучшая попытка — это значение disableBottomPointerEventsStyle :

 .bottom { pointer-events: none; cursor: defau< }

Это не имеет никакого эффекта.

Итак, мой вопрос в том, возможно ли это сделать, только изменив правило CSS для всей страницы, и если да, то как?

Обратите внимание, что это в основном вопрос CSS, JavaScript здесь в значительной степени случайный.

Комментарии:

1. const disableBottomPointerEventsStyle = '.link { pointer-events: none; cursor: defau< } .top {pointer-events: auto; cursor:pointer;}'; Я знаю, что это не совсем соответствует вашему использованию, но это был единственный способ, которым я мог это сделать. Путем выборочного включения событий указателя. И pointer-events работают так же, как и видимость

2. Если вы посмотрите на таблицу стилей страницы, над которой работаете, вы заметите, что пользовательский агент автоматически добавляет стили к a элементу. UA автоматически добавляет cursor: pointer; и значение по умолчанию pointer-events равно auto . Чтобы достичь того, что вы ищете, вам сначала нужно сначала «отменить» стили UA, т.е. Установить. a.link { cursor: none; pointer-events: none} Затем для каждого прямого потомка (кроме того, который вы хотите) добавьте cursor: pointer; pointer-events: auto; . Я знаю, что это не совсем то, что вы ищете, но, похоже, это единственный способ сделать это.

Ответ №1:

Секрет в том, чтобы отключить естественное a поведение и включить его в child .
Я использовал жесткий код a.link — чтобы минимизировать риск побочных эффектов.
Поддерживается https://caniuse.com/?search=pointer-events — должно быть хорошо.

 .link { display: flex; width: 10ex; height: 20ex; margin-bottom: 1ex; }
.wrapper { display: flex; flex-direction: column; }
.top { border: 1px solid red; }
.bottom { border: 1px solid blue; }
div { flex-grow: 1; } 

a.link{ pointer-events: none}
div.top{ pointer-events: auto}  
 <a class="link" href="about:blank">
   <div class="wrapper">
       <div class="top"></div>
       <div class="bottom"></div>
   </div>
</a>

Комментарии:

1. Потрясающе; Я не знал, что отключение a , но включение дочернего элемента все равно вызовет ссылку. Спасибо. Что-то подобное .link { pointer-events: none; cursor: defau< } .wrapper div:not(.bottom) { pointer-events: auto; cursor: pointer; } также работает в моем случае и позволяет мне оставаться в неведении о любых других divs, которые могут быть в оболочке, кроме того, который мне небезразличен.