Question

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

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

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

Answer 1

我最喜欢的技巧是将点击处理程序附加到任何旧元素，然后使用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 Fiddle demo

Answer 3

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

Answer 4

使用javascript：void（0）;而不是“＃”

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

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

Answer 5

这个怎么样：

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

然后只需添加一个事件处理程序就可以了。：）

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

5 个答案: