除了使用<a href="#">元素</a>之外，还有更好的方法可以点击其他内容

Question

我通常只使用＃将事件附加到没有网址的可点击元素，但我正在考虑它并觉得它有点hacky。 有一个更好的方法吗？

<a href="#"><img src="images/click_here.gif"/></a> 

$('a').click(function(event){
    alert('you clicked on the click button')
});

Answer 1

我最喜欢的技巧是将click处理程序附加到任何旧元素，然后使用CSS在其上设置cursor: pointer ，使其看起来可点击。 如果你添加:hover和:active状态以真正提示用户关闭奖励积分。

示例HTML：

<img src="images/click_here.gif" id="click-here-button" />

JS：

$("#click-here-button").click(function () {
    alert("You clicked on the click button.");
});

CSS：

#click-here-button
{
    cursor: pointer;
}

Answer 2

如果您正在使用jQuery，我认为任何东西都可以点击：

$('elementToClick').click(
    function(){
        alert('you clicked on a clickable thing');
    });

您可以使用hover()方法来模拟超链接外观：

$('elementToClick').hover(
    function(){
       $(this).addClass('clickable'); /* or
       $(this).css('cursor','pointer'); */
    },
    function(){
       $(this).removeClass('clickable'); /* or
       $(this).css('cursor','auto'); */
    });

   $('elementToClick).click(
       function(){
           alert('you clicked the clickable thing');
           if (this.tagName == 'A') {
              return false;
           }
           });

使用CSS：

.clickable {
    cursor: pointer;
}

JS小提琴演示

Answer 3

取决于上下文。 如果点击动作应该链接到某个地方（即使你拦截了那个动作），那么这就是<a />含义。 对此感到高兴。 如果你正在触发其他一些“非导航”功能，我只需在<img>上放置一个click-handler并在CSS中设置一个合适的游标。 个人选择，说实话。

Answer 4

使用javascript：void（0）; 代替 ”＃”

<a href="javascript:void(0);"><img src="images/click_here.gif"/></a> 

这样您就不会在URL中添加额外的“＃”。

Answer 5

这个怎么样：

<input type="image" src="http://www.google.com/images/logos/ps_logo2.png">

然后只需添加一个事件处理程序，你就是金色的。 :)