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 you have read our privacy policy.

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