Ненавязчивый Javascript: удаление ссылок, если Javascript включен

Поместите событие onclick в саму ссылку и верните false из обработчика, если вы не хотите, чтобы выполнялось поведение по умолчанию (ссылка, по которой нужно следовать)

Просто поместите onclick на тег a:

<a href = "image.jpg onclick = "Pop()"; return false;"><img ...></a>

Не забудьте вернуть false либо в конце функции (здесь Pop), либо в строке, как в приведенном выше примере. Это предотвращает перенаправление пользователя на ссылку поведением <a> по умолчанию.

Вы можете дать всем своим резервным тегам привязки конкретное имя класса, например, "простой"

Используя прототип, вы можете получить массив всех тегов, использующих этот класс, используя селектор CSS, например

var anchors=$$('a.simple')

Теперь вы можете перебрать этот массив и очистить атрибуты href или установить обработчик onclick, чтобы переопределить нормальное поведение и т. д.

(Отредактировано, чтобы добавить, что другие методы, перечисленные выше, намного проще, это просто произошло из-за большого количества ненавязчивого javascript, когда ваш JS срабатывает и дополняет функционирующую HTML-страницу дополнительными вещами!)

Атрибут href не требуется для якорей (тегов <a>), так что избавьтесь от него ...

   <a id = "apic001" href = "pic001.png"><img src = "tn_pic001.png"></a>

   <script type = "text/javascript">
      document.getElementById("apic001").removeAttribute("href");
   </script>

Этот метод позволит избежать конфликта библиотек для onclick.

Проверено в IE6 / FF3 / Chrome. Дополнительное преимущество: вы можете напрямую ссылаться на часть страницы, содержащую этот эскиз, используя идентификатор в качестве фрагмента URI: http://whatever/gallery.html#apic001.

Для максимальной совместимости с браузером добавьте атрибут name = "apic001" к тегу привязки в разметке (значения «name» и «id» должны быть идентичными).

Используя jQuery, dojo, Prototype и т. д., Вы должны иметь возможность использовать removeAttribute для нескольких похожих якорей без необходимости использования идентификатора.

Вы должны иметь возможность смешивать и сопоставлять return false из идеи Криса с вашим собственным кодом:

<a href = "image.jpg" onclick = "return false;">
    <img src = "thumbnail.jpg" pbsrc = "image.jpg" onclick = "Pop(...);">
</a>

Если у кого-то отключен Javascript, его браузер игнорирует оператор onclick в обоих элементах и ​​переходит по ссылке; если у них включен Javascript, их браузер следует обоим инструкциям OnClick - первый говорит им не переходить по ссылке <a>. ^ _ ^

Могу я предложить, на мой взгляд, лучшее решение? Используется jQuery 1.4+.

Здесь у вас есть контейнер со всеми вашими фотографиями. Обратите внимание на добавленные классы.

<div id = "photo-container">
    <a href = "image1.jpg">
        <img class = "popup-image" src = "thumbnail1.jpg" pbsrc = "image1.jpg" />
    </a>
    <a href = "image2.jpg">
        <img class = "popup-image" src = "thumbnail2.jpg" pbsrc = "image2.jpg" />
    </a>
    <a href = "image3.jpg">
        <img class = "popup-image" src = "thumbnail3.jpg" pbsrc = "image3.jpg"/>
    </a>
</div>

Затем вы создаете один обработчик событий следующим образом:

<script type = "text/javascript">
$(document).ready(function(){
    var container = $('#photo-container');

    // let's bind our event handler
    container.bind('click', function(event){
        // thus we find (if any) the image the user has clicked on
        var target = $(event.target).closest('img.popup-image');

        // If the user has not hit any image, we do not handle the click
        if (!target.length) return;

        event.preventDefault(); // instead of return false;

        // And here you can do what you want to your image
        // which you can get from target
        Pop(target.get(0));
    });
});
</script>