| |
|
|
| | Собственно, вся задача описана в названии темы. Интересует способ как остановить переход по ссылке (т.е. не переходить по ней, хотя она и нажмётся)?
Для ясности:
<a href="http://tooth/page1" onclick="getContent()">Страница 1</a>
<script type="text/javascript">
function getContent()
{
var a_href = window.event.srcElement.href;
document.getElementById('content').innerHTML = a_href;
// Здесь нужно остановить переход по нажатой ссылке. Как?
}
</script>
|
| |
| |
|
|
| |
|
|
| |
для: SilentChild
(12.09.2012 в 23:24)
| | |
<a href="http://tooth/page1" onclick="getContent(); return false;">
|
| |
| |
|
|
| |
|
|
| |
для: Lelik
(12.09.2012 в 23:54)
| | | Благодарю Вас! | |
| |
|
|
| |
|
|
| |
для: SilentChild
(12.09.2012 в 23:24)
| | | window.event.srcElement - это не у всех так. | |
| |
|
|
| |
 47.6 Кб |
|
| |
для: confirm
(13.09.2012 в 07:05)
| | | Как раз, только что начал проверять в FireFox. Не заработало. Как раз в этом месте и выдаёт предупреждение. FireFox выдаёт очень много предупреждений на счёт библиотеки JQuery (см.приложенный файл). С чем это может быть связано? Библиотеку скачал с официального сайта JQuery. FireFox что-то не понимает или библиотека не доделана? | |
| |
|
|
| |
|
|
| |
для: SilentChild
(14.09.2012 в 12:56)
| | | на джквери такой код будет выглядеть так:
<a href="http://tooth/page1">Страница 1</a>
<script type="text/javascript">
$('a').click(function(e){
var href = e.target.attr('href');
alert(href);
return false;
});
</script>
|
| |
| |
|
|
| |
|
|
| |
для: SilentChild
(14.09.2012 в 12:56)
| | | Ссылка на целевой объект вызвавший событие в IE, это srcElement, а в браузерах придерживающихся рекомендаций W3C, это target. Кроссбраузерно получить целевой объект, это
var src = window.event.target || window.event.srcElement
|
jQuery всегда возвращает целевой объект, то есть достаточно:
$('a').click(function(e) {
$(this).attr('href').... //доступ к целевому объекту по возвращаемой ссылке
e.target.tagName ... //доступ к целевому объекту как к источнику события
});
|
Ну, и кроме этого, можно явно передавать в функцию ссылку на объект: | |
| |
|
|
| |
|
|
| |
для: confirm
(14.09.2012 в 14:04)
| | | В FireFox что-то никакой из способов - window.event.target и window.event.srcElement - не желает работать. В остальных браузерах оба способа работают. В FireFox способы с JQuery и onclick="func(this)" работают.
<body>
<a href="http://tooth?page=main">Главная</a>
<script type="text/javascript">
var a = document.getElementsByTagName('a')[0];
a.onclick = new Function("alert(window.event.target.innerHTML); return false;");
</script>
</body>
|
Этот код в FireFox не выполняет alert() даже, если заменить window.event.target.innerHTML на window.event.srcElement.innerHTML. | |
| |
|
|
| |
|
|
| |
для: SilentChild
(14.09.2012 в 22:00)
| | | window уберите, будет работать. Это когда заговоришься, то лишнего вставишь не туда, то еще чего ... )
event.target || window.event.srcElement
Ссылку на window можно опустить в данном случае, а значит просто
event.target || event.srcElement
Чего вы хотите добиться в конечном итоге? Если в функцию передается событие непосредственно от элемента (нативный обработчик), то зачем вам узнавать источник?
Другое дело, когда вы делегируете обработку событий элементу верхнего уровня. Например,
<script>
function fun(e) {
alert(e.href)
}
</script>
<body onclick="fun(event.target||event.srcElement)">
<a href="#a1">link 1</a>
<a href="#a2">link 2</a>
<a href="#a3">link 3</a>
<a href="#a4">link 4</a>
<a href="#a5">link 5</a>
<a href="#a6">link 6</a>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(14.09.2012 в 22:43)
| | | > Если в функцию передается событие непосредственно от элемента (нативный обработчик), то зачем вам узнавать источник?
Да, это действительно маразм - узнавать, при таком раскладе, источник события.
Дело в том, что раньше у меня был пробел в знании this (не говоря уже про JQuery), поэтому писал так:
<body>
<!-- MENU -->
<ul id="menu">
<li><a href="http://tooth?page=main">Главная</a></li>
<li><a href="http://tooth?page=about">О компании</a></li>
<li><a href="http://tooth?page=products">Продукция</a></li>
<li><a href="http://tooth?page=contacts">Контакты</a></li>
</ul>
<!-- SCRIPT -->
<script type="text/javascript">
var a = document.getElementById('menu').getElementsByTagName('a');
for(var i = 0; i < a.length; i++)
a[i].onclick = new Function("alert(window.event.srcElement.href); return false;");
</script>
</body>
|
Времена меняются. Я узнал о this и о JQuery, поэтому такой способ добраться до элемента, инициирующего событие, отпал сам собой. Недавно решил написать старым способом и заметил, что FireFox не может добраться до элемента таким способом. Вот и решил разобраться почему FF не может добраться до элемента с помощью window.event.srcElement и раз и навсегда закрыть данную тему для себя.
В итоге: проверил без указания window, вот так - event.target.href. Везде работает, а в FF никак не хочет выполняться. | |
| |
|
|
| |
|
|
| |
для: SilentChild
(15.09.2012 в 21:21)
| | | >"раньше у меня был пробел в знании this (не говоря уже про JQuery)"
Не знаю уж, что было с вами раньше, но если сейчас вы пишете такое, умудряясь в одном предложении соединять и сравнивать квадратное с холодным (this и JQuery), то дела ваши действительно плохи... увы... | |
| |
|
|
| |
|
|
| |
для: ЯСА
(15.09.2012 в 21:32)
| | | =) Имелось в виду, что выше указанный код ещё проще реализуется на JQuery, чем тем же макаром, но с использованием this. Вот. | |
| |
|
|
| |
|
|
| |
для: SilentChild
(15.09.2012 в 21:40)
| | | >выше указанный код ещё проще реализуется на JQuery
Это для вас он "визуально" проще, на самом деле же все происходит ровно так, как и решается в JS. А с this вы просто запутались:
<a href="http://tooth?page=main">Главная</a>
<a href="http://tooth?page=about">О компании</a>
<a href="http://tooth?page=products">Продукция</a>
<a href="http://tooth?page=contacts">Контакты</a>
<script>
var a = document.getElementsByTagName('a');
for(var i = 0; i < a.length; i++)
a[i].onclick = new Function("alert(this.href); return false;");
//здесь в функцию мы передаем ссылку на объект,
//так в данном случае владельцем this является объект a[i]
</script>
|
http://javascript.ru/tutorial/object/thiskeyword
http://javascript.ru/tutorial/events/intro
http://learn.javascript.ru/event-delegation | |
| |
|
|
| |
|
|
| |
для: confirm
(18.09.2012 в 18:03)
| | | Да именно "визуально", вы правы. В общем и целом, чушь сморозил я какую-то. Действительно запутался. Благодарю за ссылки и помощь! | |
| |
|
|
