Как передать объект вызову функции из javascript как href

Использование встроенных событий в качестве атрибутов Я могу передать текущий объект функции, используя ключевое слово this. Как я мог это сделать, используя его через Javascript как href.Как передать объект вызову функции из javascript как href

Следующий пример очистки вопрос:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
<script> 
function foo(ob){ 
    alert(ob.innerText); 
} 
</script> 
</head> 
<body> 
    <a href="#" onclick="foo(this)">On Click Call</a> Works Fine! 
    <br /> 
    <br /> 
    <a href="javascript:foo(this)">Javascript linked</a> Does not work. 
</body> 
</html>

Checkout это Demo

источник

2015-05-18 SaidbakR

Почему вы хотите поместить его в href вместо onclick? – jfriend00

Для совместимости с любым событием на любом устройстве. Например, предположим, вы сосредоточились на ссылке с помощью вкладки и нажали Enter. – SaidbakR

Обработчик 'onclick' по-прежнему вызывается, когда вы фокусируетесь на ссылке с помощью вкладки и нажимаете Enter. Я просто подтвердил, что здесь, в основных браузерах: http: // jsfiddle.net/jfriend00/4o2Lakf4/ – jfriend00

В целом, по причинам, ремонтопригодности среди других, это хорошая идея, чтобы избежать сдачи JavaScript непосредственно в атрибут href. Поэтому я бы не рекомендовал этот подход. Однако, если ты должен идти по этому пути по какой-то причине ...

Когда JavaScript вызывается с помощью атрибута href, значение this является window. Чтобы получить элемент с щелчком, одно (несколько kludgy) решение должно назначить ему атрибут id, который вы можете использовать для его выбора.

<a id="js-linked" href="javascript:foo(document.getElementById('js-linked'));">Javascript linked</a>

Как вы можете видеть, это становится немного трудно читать. Использование атрибута onclick сохраняет чистоту и удобство обслуживания, потому что this присваивается значение элемента clicked. И избегая встроенного JS в целом и присоединяя слушателя click в изолированном коде, вы можете сохранить все более чистым и более удобным.

источник

2015-05-18 01:08:44 Trott

Почему в мире это рекомендуемое решение? – jfriend00

@ jfriend00 I + 1'd, потому что он ответил на вопрос OP. Я ответил на ваш ответ, потому что это рекомендуемое решение вообще –

. Мое мнение, что мы должны понимать, что пытается сделать OP и предложить лучшее решение этой проблемы. Это часто означает рекомендацию решения, которое не совсем то, о чем попросил ОП, потому что слишком много вопросов имеют проблему [XY] (http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem), где они спрашивают об их решении, а не просят наилучшего решения проблемы. Таким образом, я не буквально «отвечаю на заданный вопрос», когда есть гораздо лучшее решение реальной проблемы. – jfriend00

Как правило, лучше использовать принципы Unobstrusive Javascript и не помещать обработчик событий в свой HTML вообще.

Когда вы используете .addEventListener() для установки обработчика событий, значение this будет автоматически установлено для объекта, вызвавшего событие.

Вот как это будет работать:

!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <a href="#" id="call">On Click Call</a> Works Fine! 
<script> 
document.getElementById("call").addEventListener("click", function(e) { 
    e.preventDefault(); 
    alert(this.textContent); 
}); 
</script> 
</body> 
</html>

Внесены изменения:

Перемещение <script> тега после содержания так будет уже загружены элементы DOM при запуске сценария.
Добавить уникальное значение идентификатора целевой ссылку
Используйте document.getElementById(), чтобы получить объект целевой ссылки
переместить обработчик события из вашего HTML и в сценарий и использовать .addEventListener(), чтобы добавить обработчик событий.
Используйте this, чтобы перейти к ссылке, нажатой в обработчике событий.

источник

2015-05-18 01:08:48 jfriend00

Я прочитал документ «Unobstusive Javascript», который вы считаете выше, и это не заставило меня думать, что использование встроенных событий или Javascript в качестве href не является хорошим поведением, поскольку теги HTML5 содержат более сложные и сложные атрибуты, а не просто встроенное событие с маленькое имя функции в качестве ее значения. – SaidbakR

@ sємsєм - Вот еще одна ссылка на эту тему: [W3: Принцессы ненавязчивого Javascript] (http://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript). Для меня основная идея заключается в том, что контент и код представляют собой отдельные типы ресурсов, которые часто обрабатываются разными командами в компании и часто управляются по-разному. Таким образом, лучше не переплетать Javascript внутри содержимого HTML. Это широко распространенный шаблон дизайна. – jfriend00

Хорошо, я +1 к вашему ответу, потому что упоминание этой концепции, но я должен принять другой ответ, потому что он предлагает конкретный ответ на мой вопрос. Большое спасибо. – SaidbakR

В javascript:foo(this)this относится к объекту Window. У вас нет ссылки на элемент clicked при использовании псевдо-протокола javascript, поэтому он не будет работать.

источник

2015-05-18 01:13:06

Как передать объект вызову функции из javascript как href

ответ

Смежные вопросы