Как определить ссылки кликов (текст, изображения и т. Д.) С помощью Javascript? - PullRequest
Новая
       15

Как определить ссылки кликов (текст, изображения и т. Д.) С помощью Javascript?

10 голосов
/ 10 декабря 2011

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

Сценарий должен работать со сторонних сайтов (где владелец устанавливает теги script на своем сайте).

Как я могу сделать это с помощью JavaScript?

Использую ли я прослушиватель событий?Перебирать все объекты ссылок?Или что-то еще?

Мои навыки работы с javascript - новичок / средний уровень, поэтому подробные примеры / объяснения очень ценятся.

Я начал использовать прослушиватель событий здесь, но пока я обнаруживаюВСЕ клики на странице: Перевод и использование фрагмента кода addEventListener для обнаружения в разных браузерах

Я рассмотрю альтернативу JQuery, но я просто не знаю, как она будет работатьСторонний сайт, если на этом сайте нет библиотеки JQuery.

Спасибо всем.

Ответы [ 4 ]

10 голосов
/ 10 декабря 2011

Чтобы вызывать функцию всякий раз, когда по ссылке (динамически добавленной или нет) щелкают, используйте on () 

$(document).on("click", "a", function() {
    //this == the link that was clicked
    var href = $(this).attr("href");
    alert("You're trying to go to " + href);
});

Если вы используете более старую версию jQuery,тогда вы будете использовать делегат () (обратите внимание, что порядок селектора и тип события переключаются) 

$(document).delegate("a", "click", function() {
    //this == the link that was clicked
    var href = $(this).attr("href");
    alert("You're trying to go to " + href);
});
8 голосов
/ 10 декабря 2011

Я подумал, что попробую не-jQuery (и решение не из других библиотек, просто ... ну, на несколько минут): 

function clickOrigin(e){
    var target = e.target;
    var tag = [];
    tag.tagType = target.tagName.toLowerCase();
    tag.tagClass = target.className.split(' ');
    tag.id = target.id;
    tag.parent = target.parentNode;

    return tag;
}

var tagsToIdentify = ['img','a'];

document.body.onclick = function(e){
    elem = clickOrigin(e);

    for (i=0;i<tagsToIdentify.length;i++){
        if (elem.tagType == tagsToIdentify[i]){
            console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).');
            return false; // or do something else.
        }
    }
};

JS Fiddle demo .

Поправлено выше, чтобы обнаружить img элементов, вложенных в элемент a (что я думаю - это то, что вы хотите, перечитав ваш вопрос): 

function clickOrigin(e){
    var target = e.target;
    var tag = [];
    tag.tagType = target.tagName.toLowerCase();
    tag.tagClass = target.className.split(' ');
    tag.id = target.id;
    tag.parent = target.parentNode.tagName.toLowerCase();

    return tag;
}

var tagsToIdentify = ['img','a'];

document.body.onclick = function(e){
    elem = clickOrigin(e);

    for (i=0;i<tagsToIdentify.length;i++){
        if (elem.tagType == tagsToIdentify[i] && elem.parent == 'a'){
            console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case and one inside an "a" element, no less!).');
            return false; // or do something else.
        }
        else if (elem.tagType == tagsToIdentify[i]){
            console.log('You\'ve clicked a monitored tag (' + elem.tagType + ', in this case).');
            return false; // or do something else.
        }
    }
};

Демонстрация JS Fiddle .

0 голосов
/ 10 декабря 2011

Это примерно как сделать без использования jQuery: 

<html>

    <head>
            <script type="text/javascript">
            window.onload = function() {
              var observed = document.getElementsByTagName('a');

              for (var i = 0; i < observed.length; i++) {
                observed[i].addEventListener('click', function (e) {
                   var e=window.event||e;

                   alert('Clicked ' + e.srcElement.innerText);

                   if (e.preventDefault) { e.preventDefault() } else { e.returnValue=false }
                }, false);
              }
            }
            </script>
    </head>


    <body>

            <a href="">foo</a>
            <a href="">bar</a>

    </body>
</html>
0 голосов
/ 10 декабря 2011

Я использую это таким образом, что это влияет только на теги a со ссылками в них, 

(function($){
$("a[href!='']").each(function(){
    $(this).click(function(){
    var href = $(this).attr("href")
    })
});
})(jQuery);

Но в этой заметке вы говорите, что ваши пользователи хотят использовать это на сторонних веб-сайтах, чтобы у них не было jQuery, поэтому вам может понадобиться эта проверка в верхней части вашего файла, но тогда вам нужно будет включить этот файл после использования тот же код, но проверьте ваш объект или имя функции 

if(typeof(jQuery) == undefined){
    var head = docuent.getElementsByTagName('head')[0];
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "http://yourserver.url/jquery.js");
    head.appendChild(script);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...