2

Есть блок, при нажатии на который (onclick) браузер перенаправляется на новую страницу - некая имитация ссылки. То есть, "ссылкой" является весь блок со всем своим содержимым. Появилась необходимость разместить внутри этого блока другую ссылку (<a href...>...</a>).

То есть, при нажатии в любое место блока браузер должен перенаправляться на одну страницу, но если внутри этого блока мы нажали на ссылку <a>, браузер должен переходить по ссылке внутри этого тега, а не по общей ссылке блока. Как такое можно реализовать?

2 ответа 2

2

Попробуйте так:

  $('document').ready(function() {
    $('.block').on('click', function(e) {
      if (!$(e.target).hasClass('link')) {
        alert('Block clicked');
        return;
      }

      alert('Link clicked');
    });
  });
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<div class="block" style="width: 300px; height: 300px; border: 1px solid;">
  <p>Test</p>
  <a class="link" href="#">I'm link</a>
</div>

1
  • Спасибо. Немного доработал, чтобы не было привязано к классу (не у всех ссылок есть классы): jsfiddle.net/kjh32kd3
    – nup
    9 сен 2015 в 13:49
1

Можно сделать немного удобнее.

  1. Как известно в JQuery у объекта события есть два полезных свойства: target - непосредственно тот элемент, из-за которого было вызвано событие и currentTarget - элемент на который повешен обработчик этого события
  2. Добавим в элементы при нажатии на которые будет происходить переход атрибут data-href, показывающий url страницы для перехода.
  3. При вызове события в обработчике будем проверять, есть ли у элемента вызвавшего событие аттрибут data-href, если есть берем урл из этого атрибута и переходим по нему, если же нет, тогда берем урл из главного блока.

http://jsfiddle.net/8542medo/

$('.b-block').on('click', function(evt) {
  var href = evt.target.hasAttribute('data-href') ?
    evt.target.getAttribute('data-href') :
    evt.currentTarget.getAttribute('data-href');

  alert(href) // А после совершаем переход по ссылке
});
.b-block {
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
<div class="b-block" data-href="#first">
  <a href="#" data-href="#second">I'm link</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.