e.stopPropagation не работает для события mouseenter

Question

У меня есть div, вложенный в якорь, подобный этому:

<a href="www.example.com">
  <div class="nested-div"></div>
</a>

Я хочу, чтобы якорь не подчеркивался или не перенаправлялся на www.example.com при наведении курсора или щелчке по вложенному div. Я думал, что это возможно с помощью event.stopPropagation (), но он не работает.

Я могу остановить событие click, когда я нажимаю на вложенный div от перенаправления на href, используя это:

$('.nested-div').ready(function() {
  $('.nested-div').click(function(e){
    e.preventDefault();
  });
});

Теперь я хочу также запретить наведению указателя мыши на вложенный элемент div, но это не работает:

 $('.nested-div').mouseenter(function(e){
    e.stopPropagation();
 });

Чтобы было ясно, я хочу навести сам привязку на иметь подчеркивание, но не когда вложенный div находится. Это возможно?

Answer 1

Это вызвано CSS, а не каким-либо правилом сценариев. Удалите стили примерно так:

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

<a href="google.com"><div class="nested-div">test</div></a>
vs
<a href="google.com" class="nostyle"><div class="nested-div">test</div></a>

Answer 2

Если вы хотите добиться этого без добавления классов к самому тегу <a>, вы можете использовать метод jQuery #has.

$('.nested-div').ready(function() {
  $('.nested-div').click(function(e){
    e.preventDefault();
  });
});
$('a:has(.nested-div)').css({
  'text-decoration': 'none', 
  color: 'inherit', 
  cursor: 'default'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="www.example.com">
  <div class="nested-div">Nested div link</div>
</a>
<a href="javascript:void(0);">Normal link</a>