Ссылка в проблеме с кликабельными ячейками таблицы - PullRequest
Новая
       1

Ссылка в проблеме с кликабельными ячейками таблицы

1 голос
/ 26 января 2011

У меня есть кликабельная ячейка со ссылкой внутри, что-то вроде следующего: 

<html><body>
<table><tr><td onclick="alert('Cell click event fired.');">
Blah blah blah 
<a href="#" onclick="alert('Link click event fired.'); return false;">Here</a>
</td></tr></table>
</body></html>

Проблема заключается в том, что при нажатии на ссылку запускаются оба события onclick.Как я могу предотвратить это?

РЕДАКТИРОВАТЬ:

Решение JQuery является приемлемым, если кто-то может дать мне пример, как это сделать.

Ответы [ 3 ]

2 голосов
/ 26 января 2011

Вам нужно остановить распространение события.

РЕДАКТИРОВАТЬ: Поскольку вы спрашивали о jQuery, вы можете удалить встроенные атрибуты onclick и назначить обработчики следующим образом: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
    $(function() {
        $('table td').click( doSomething )
           .find('a').click( doSomethingElse );

        function doSomething() {
            alert('something');
        }

        function doSomethingElse(e) {
            alert('somethingElse');
            return false;  // prevent default behavior and bubbling on the <a>
        }
    });
</script>

Обратите внимание, что при этом события клика будут назначаться каждому <td> и их потомкам <a>.Вам нужно будет предоставить более конкретную разметку для более конкретного решения.

И не забудьте импортировать библиотеку jQuery до вашего кода.

Чтобы сделать это совместимым с браузером способом, сделайте следующее:

Пример: http://jsfiddle.net/7u9Jg/1/

<a href="#test" onclick="doSomethingElse(event);">Here</a>

function doSomething() {
    alert('something');
}

function doSomethingElse(e) {
         // make sure the event doesn't bubble
    if( e ) e.stopPropagation();               // W3C Compatible
    else window.event.cancelBubble = true;     // IE Compatible

    alert('somethingElse');
}
1 голос
/ 26 января 2011

«Внутренний» элемент должен быть настроен так, чтобы обработчик возвращал false: 

Blah blah blah <a href="#" onclick="doSomethingElse(); return false;">Here</a>

, что предотвратит «всплывающее» событие по умолчанию для события через DOM.(Это также предотвратит поведение по умолчанию для тега <a>, который в этом случае в любом случае ничего не значит.)

Вы также можете сделать это, вызвав метод ".preventDefault ()" для объекта событияизнутри обработчика, но вам придется изменить больше кода, чтобы сделать это, и это, похоже, не стоит (здесь).

Я делаю это много, похоже :-)В любом случае, возвращение false определенно предотвращает действие по умолчанию, но оно не отменяет всплытие.Для этого обработчик может вызвать «.stopPropagation ()» (или в старых браузерах IE установить флаг «cancelBubble» для объекта события или что-то в этом роде).Однако, чтобы сделать это, вы должны зарегистрировать свои обработчики событий по-другому (ну, у вас может не быть , у которых есть , но я не припомню хитрости, необходимой для получения объекта события с помощью встроенного кода обработчика.)1015 *

Я действительно ненавижу отвечать на вопросы, подключая фреймворки, но обработка событий (и работа с капризами всех различных браузеров) - это одна из вещей, которые я с радостью делегирую фреймворку;почти все, что вы выберете, сделает обработку событий более простой и надежной.

0 голосов
/ 26 января 2011

Разве это не то, что вы хотите? Включив ваше событие onclick в <td>, вы говорите браузеру сделать именно это .. можете ли вы объединить необходимый код в свой <a> onclick?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...