Как предотвратить гиперссылку элемента grand-child

Question

Как я могу сделать клики по .no-click div без перехода на страницу http://example.com?Кто-нибудь может мне помочь?

Вот пример https://lajumate.ro/ это веб-страница с рекламой, если вы наведите курсор мыши на объявление, появится кнопка «Поделиться» и кнопка «Сохранить», и она s clickable (the button sнаходятся внутри href)

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<a href="http://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>

Answer 1

Если хотите, отключите действие ссылки из .no-click div, но оно должно работать на привязке;Затем используйте эти два блока;

<script type="text/javascript">
$('.no-click').on('click', function(event){    
        event.preventDefault(); 
})
$('a').on('click', function(){
      document.ontouchmove = function(){ return true; }
})
</script>

if you want a also should not work then use only firs blcok!

Thanks!

Answer 2

Легко сделать, просто предотвратите событие щелчка элемента a, если вы нажмете no-click, а если нет, просто перейдите по ссылке.Проверьте мой код ниже:

$('.no-click').on('click', function(event) {
  event.preventDefault();
  alert('yeah, no need to go!')
});

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  display: none;
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

.your-link:hover .no-click {
    display: block;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="your-link" href="https://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>

Answer 3

Как я могу сделать .no-cick div clickable без перехода на example.com?Кто-нибудь может мне помочь?Спасибо!

Конечно.Попробуйте это самый простой и простой способ понять.

Ответ в одну строку здесь будет:

Добавить onclick = "return false".

Чтобы вы поняли лучше, прочитайте ниже:

Вам просто нужно добавить функцию onclick в div и вернуть из нее false.

HTML

<a href="http://example.com">
  <div class="test">
     <div class="no-click" onclick="return stopRedirection();">

    </div>
  </div>
</a>

JS

stopRedirection = () => {
    alert("Div Clicked!");
  return false;
}

Я решил эту проверку по приведенной ниже ссылке: Пример jsfiddle

Надеюсь, что это решитВаша проблема.

Answer 4

Один из способов был бы таким:

document.querySelector('.no-click').addEventListener('click', function(e) {
  e.preventDefault(); // This line will prevent the browser from following the link
  // Other code you may want to run
});

css:
.test {
  width: 100px;
  height: 100px;
  background-color:red;
  position:relative;

}
.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color:blue;
}

<a href="http://example.com">
  <div class="test">
     <div class="no-click">

    </div>
  </div>
</a>

---

Если вы просто хотите, чтобы тип курсора (указатель) отображался при наведении курсора на ссылку, вы можете использовать CSS:

css:
.test {
  width: 100px;
  height: 100px;
  background-color:red;
  position:relative;

}
.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color:blue;
}
.no-click:hover { /** A rule for the div when the user hovers over it */
  cursor: pointer;
}

<a href="http://example.com">
  <div class="test">
     <div class="no-click">

    </div>
  </div>
</a>

Answer 5

Правильным способом является использование stopPropagation, который является более новым методом его исторического псевдонима cancelBubble, и отменяет всплывающее событие.

В некоторых ситуациях preventDefault может работать, хотя имейте в виду, что это не отменяет всплытие, но может иметь аналогичный эффект.

Обновлено: похоже, это не будетработать, если оно не сочетается с preventDefault.Посмотрим позже, чтобы понять, почему это так.

Фрагмент стека

var no_click = document.querySelector('.no-click');
no_click.addEventListener('click', function(e) {
  e.stopPropagation();
  e.preventDefault();    //temp. update, though this should NOT be needed
  console.log('hey');
})

.test {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
}

.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<a href="https://example.com">
  <div class="test">
    <div class="no-click">

    </div>
  </div>
</a>

Answer 6

<a href="http://example.com">
  <div class="test">
     <div class="no-click">

    </div>
  </div>
</a>

css:
.test {
  width: 100px;
  height: 100px;
  background-color:red;
  position:relative;

}
.no-click {
  position: absolute;
  top: 25%;
  right: 25%;
  width: 50px;
  height: 50px;
  background-color:blue;
}

<script type="text/javascript">
$('a').on('click', function(event){
    event.preventDefault();
})
</script>