JavaScript «возвращает ложь» работает как встроенный вместе с HTML?

Question

Я знаю, что JavaScript return false означает предотвращение события по умолчанию (например, метод preventDefault()).

# 1

<a href="http://stackoverflow.com" onclick="return false;">click</a>

# 2

<a id="a" href="http://stackoverflow.com">click</a>
<script>
document.getElementById('a').addEventListener('click', function(){  return false; }, false);
</script>

Интересно, почему просто # 1 предотвращают событие по умолчанию, а не # 2. Я сделал какую-то ошибку?

Edit: Извините, я пропустил идентификатор тега привязки и третий аргумент кода в # 2. Я добавил его, но он все еще не работает.

Answer 1

В вашем втором примере есть две проблемы:

1. Вы используете document.getElementById, но вы даете тэг. Вы можете, вероятно, использовать document.getElementsByTagName (который возвращает NodeList, который вы затем указали бы в индексе), или дать элементу атрибут id и использовать getElementById для его поиска.

2. В вашем вызове addEventListener отсутствует третий аргумент, который требуется. Итак:

   document.getElementById('someId').addEventListener(
       'click',
       function(){  return false; },
       false // <=== Third argument, you almost certainly want `false`
   );
   

Относительно вашего вопроса о return false: Если вы используете браузер, поддерживающий addEventListener, и подключаете к нему обработчики событий, нет, вы не используете return false, чтобы предотвратить действие по умолчанию. Вместо этого вы используете event#preventDefault. (Вы также можете использовать event#stopPropagation, чтобы остановить всплытие событий, но DOM0 return false этого не делает, так что это просто дополнительный бонус.)

document.getElementById('someId').addEventListener(
    'click',
    function(e){
        // Prevent the default action of the link
        e.preventDefault();

        // Stop the event propagating (bubbling) to the parent element
        e.stopPropagation();
    },
    false
);

Также обратите внимание, что есть много людей, использующих IE8 и более ранние версии, которые не поддерживают addEventListener (вместо этого они поддерживают оригинальный Microsoft attachEvent; но не все поддержка версий preventDefault или stopPropagation).

---

Несколько не по теме : Как видите, обработка событий в кросс-браузерном режиме - это хлопотно. Это одна из многих проблем, которые вы можете избежать, используя приличную библиотеку JavaScript, такую ​​как jQuery , Прототип , YUI , Закрытие или любой из нескольких других . Они сглаживают различия между браузерами и предоставляют множество полезных утилит, поэтому вы можете сосредоточиться на том, что вы на самом деле пытаетесь построить (вместо того, чтобы беспокоиться о том, как IE7 и более ранние версии имеют сломанную версию getElementById) .

Примеры:

jQuery : jQuery предоставляет функцию return false (хотя она отличается от DOM0, о которой вы говорите), а также гарантирует, что event#preventDefault и event#stopPropagation работают независимо от того, как Базовый браузер обрабатывает события. Так что любой из них работает с jQuery:

// Using return false (which prevents the default AND -- unlike DOM0 stuff -- stops propagation)
$('#someId').click(function() { return false; });

// Using the DOM standard event methods -- even on browsers that don't support them
$('#someId').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Prototype : Prototype предоставляет стандартные методы событий DOM (даже в браузерах, которые их не поддерживают), а также event#stop, что является просто комбинацией предотвращения по умолчанию и прекращение распространения:

// Using `stop` (which prevents the default and stops propagation)
$('someId').observe('click', function(e) { e.stop(); });

// Using the DOM standard event methods -- even on browsers that don't support them
$('someId').observe('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
});

Другие библиотеки будут предлагать аналогичные функции.

Answer 2

Это не будет работать без правильного идентификатора (не имя тега)

document.getElementById('a')

Попробуйте

<a id="example" href="http://stackoverflow.com">click</a>
...
document.getElementById('example')...

Answer 3

вы не можете получить якорный тег с document.getElementById (), потому что это TagName, а не Id.

Answer 4

Если вы используете getElementById(), вам нужно id для элемента. Как следует из названия, эта функция найдет элемент путем поиска id.

<a id="a" href="http://stackoverflow.com">click</a>
<script>
document.getElementById('a').addEventListener('click', function(){  return false; });
</script>

Если вы хотите найти его по имени тега, вы можете использовать getElementsByTagName(). Он вернет массив (фактически NodeList) этих тегов.

Использование:

var x=document.getElementsByTagName('a')[0];

x будет хранить ссылку на первую ссылку (элемент a) на странице.

Answer 5

Может быть, вам нужно добавить «javascript:» перед «return false».Вот так:

<a href="http://stackoverflow.com" onClick="javascript:return false;">click</a>

Надеюсь, это поможет.