Открыть новое окно при клике на фон

Question

Я использую CSS, чтобы применить фоновое изображение к тегу div, который оборачивает весь контент на сайте.

<div id="mainBack">
  <%-- All other content goes here --%>
</div>

И идентификатор CSS со свойством background ...

#mainBack
{
    background: url(../images/background.jpg) repeat-x top;
    padding: 15px 0 20px 0;
}

ПРОБЛЕМА: Я пытаюсь выяснить, как открыть новое окно браузера для другого URL-адреса при каждом нажатии на фоновое изображение.Я пытался сделать это, используя jQuery, но способ, которым я реализовал это, фактически заставляет каждый щелчок по чему-либо на веб-сайте открывать новое окно.Событие jQuery click, которое делает это, хотя и некорректно, находится ниже:

$('#mainBack').click(function () {
    window.open('http://InternalBusProcess:8083/HyperFix.jpg', 'HyperFix');
});

Заранее благодарен за любые предложения о том, как я могу реализовать это поведение таким способом, который действительно работает!

Answer 1

Вы можете остановить распространение click событий для элементов поверх вашего #mainBack элемента.

Например:

<div id="mainBack">
    <a href="#">Some Link</a>
</div>

<script>
$('a').on('click', function (event) {
    event.stopPropagation();
});
</script>

Это сделает так, что любая ссылка будет нажатаon не позволит событию всплывать до каких-либо элементов-предков.Что, в свою очередь, сделает возможным обнаружение щелчка по элементу #mainBack.

Вам нужно будет остановить распространение события на любом элементе, на который вы хотите нажать, не открывая всплывающее окно.

Также обратите внимание, что .on() является новым в jQuery 1.7, поэтому, если вы используете более старую версию, измените .on() на .bind().

Обновление

Вы также можете использоватьобъект event внутри вашего обработчика событий, чтобы проверить, является ли целевой элемент элементом #mainBack:

$('#mainBack').click(function (event) {
    if (event.target.id == 'mainBack') {
        window.open('http://InternalBusProcess:8083/HyperFix.jpg', 'HyperFix');
    }
});

Вот демонстрация использования event.target: http://jsfiddle.net/j5NuW/ (обратите внимание наобработчик событий присоединен к элементу body, но предупреждение отображается только при нажатии на элемент #mainBack)

Answer 2

Вы можете проверить, был ли выбранный элемент элементом div или чем-то еще, добавив одну строку кода и параметр события в функцию:

$('#mainBack').click(function (event) {
    if(event.target==this)
        window.open('http://InternalBusProcess:8083/HyperFix.jpg', 'HyperFix');
});