JavaScript: Добавление onClick обработчика, не перезаписывая существующий
Есть ли у вас обновленный SDK для Eclipse? Вам нужен Rev.22. После того как вы загрузили его, вы можете экспортировать проект с помощью «build.gradle».
7 ответов
Вам необходимо создать замыкание, чтобы сохранить исходное значение onclick каждой ссылки:
<a href="#" onclick="alert('hi');return false;">Hi</a>
<a href="#" onclick="alert('there');return true;">There</a>
<script type="text/javascript">
function adaptLinks() {
var links = document.getElementsByTagName('a');
for (i = 0; i != links.length; i++) {
links[i].onclick = (function () {
var origOnClick = links[i].onclick;
return function (e) {
if (origOnClick != null && !origOnClick()) {
return false;
}
// do new onclick handling only if
// original onclick returns true
alert('some work');
return true;
}
})();
}
}
adaptLinks();
</script>
Обратите внимание, что эта реализация выполняет новую обработку onclick, только если исходный обработчик onclick возвращает true . Это нормально, если вы этого хотите, но имейте в виду, что вам придется немного изменить код, если вы хотите выполнять новую обработку onclick, даже если исходный обработчик возвращает false.
Подробнее о закрытии см. comp .lang.javascript FAQ и от Дугласа Крокфорда .
Не назначайте обработчику событий напрямую: используйте вместо этого модель подписки addEventListener / attachEvent (в которой также есть пары удаления!).
Хорошее введение здесь .
Используйте оболочку около addEventListener (браузеры, поддерживающие DOM) или attachEvent (IE).
Обратите внимание, что если вы когда-либо захотите сохранить значение в переменной без перезаписи старого значения, вы можете использовать замыкания .
function chain(oldFunc, newFunc) {
if (oldFunc) {
return function() {
oldFunc.call(this, arguments);
newFunc.call(this, arguments);
}
} else {
return newFunc;
}
}
obj.method = chain(obj.method, newMethod);
В Аспектно-ориентированном программировании это известно как « совет ».
как насчет установки oldClick = links [i] .onclick или пустой функции . Примерно так
var oldOnClick = links[i].onclick || function() { return true; };
links[i].onclick = function (e)
{
if (!oldOnClick())
return false;
//<do some work>
return true;
}
Или вы можете использовать attachEvent и addEventListener , как рекомендуют другие
function addEvent(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent)
obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);});
}
, и использовать так
addEvent(links[i], 'click', [your function here]);
Используя JQuery, работает следующий код:
function adaptLinks(table, sortableTable)
{
$('a[href]').click(function (e)
{
if(!e.isDefaultPrevented())
{
<do some work>
}
});
}
Это требует использования дополнительной библиотеки, но позволяет избежать некоторых проблем, которые существуют с addEventListener / attachEvent (например, проблема последнего с this ссылки ).
Есть только одна ошибка: если исходный обработчик onClick назначен с использованием «обычного» JavaScript, строка
...
if(!e.isDefaultPrevented())
...
всегда будет преобразована в true , даже если исходный обработчик отменил событие, вернув false. Чтобы исправить это, исходный обработчик также должен использовать JQuery.
Эту функцию следует использовать (подход к прослушивателям событий):
function addEventListener(element, eventType, eventHandler, useCapture) {
if (element.addEventListener) {
element.addEventListener(eventType, eventHandler, useCapture);
return true;
} else if (element.attachEvent) {
return element.attachEvent('on' + eventType, eventHandler);
}
element['on' + eventType] = eventHandler;
}
или вы можете сохранить еще немного кода, добавив эту функцию (если вам нужно добавить один и тот же прослушиватель событий ко многим элементам):
function addClickListener(element) {
addEventListener(element, 'click', clickHandler, false);
}
У меня были проблемы с перегрузкой простым способом - эта страница была отличным ресурсом. http://www.quirksmode.org/js/events_advanced.html