1

要拥有充当 javascript 触发器的图像，有很多选项：

（编辑：使用内联 css 和 javascript 来简化问题）

锚标记中的图像：

<a href="#" onclick="myFunc();"><img src="pic.jpg" /></a>

带有属性的 Img 标签：

<img style="cursor:pointer" onclick="myFunc();" />

具有属性的锚标记：

<a href="#" onclick="myFunc();" style="background:url('pic.jpg');"></a>

可能还有其他人。有没有（惯例|最佳实践|广泛接受|万无一失）的方式来继续这个？

我想要一个小图像作为一个按钮来运行某些 Javascript 或 AJAX。

顺便说一句，我见过这个，但这不是我要找的，他谈论的是标题元素，而不是链接。

相关：我应该为 JavaScript 链接使用哪个“href”值，“#”还是“javascript:void(0)”？

4

5 回答 5

3

没有关于如何使用onclick事件的约定。

但是你不应该使用内联 javascript。就像我们在 2012 年一样，许多 javascript 框架让您的生活更轻松。

如果您迁移到 javascript 库（例如jQuery），最适合您：

<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
    $(document).ready(function(){
        $('#myPicture').on('click', function(){
            alert('image clicked');
        });
    });
</script>

或纯javascript：

<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
    window.onload = function(){
        document.getElementById('myPicture').onclick = function(){
            alert('image clicked');
        };
    };
</script>
于 2012-09-20T10:08:32.190 回答
2

如果我是你，我会坚持你的第一选择，但会做一些改变

<a href="javascript:void(0);" onclick="myFunc();"><img src="pic.jpg" border="0" /></a>

原因如下

  • 如果您的 myFunc 失败，href="#" 仍然允许点击
  • javascript:void(0) 不允许点击
  • javascript:void(0) 是跨浏览器
  • javascript:void(0) 仍然允许基本的隐含锚标记行为
  • 大多数浏览器都可以识别图像标签上的属性/属性，但某些旧版本的 IE 可能不喜欢它
  • 如果您想使用由您决定的背景图像，但这意味着需要额外的 CSS 来控制高度/宽度

此外，如果您使用 jQuery 或其他一些库，那么我建议您通过

$(document).on('ready, function() { $('#myAnchorId').on('click', myFunc); });

而不是通过 HTML 道具......以防万一用户关闭了 JavaScript

于 2012-09-20T10:11:57.407 回答
1

如果您只想将图像用作触发器，请使用第二个选项...

如果您要为同一件事使用更多内容，则可以使用跨度...

<span onclick="myFunc();" >
    <img src="pic.jpg" style="cursor:pointer" />
    if you click the image, or this text, the javascript function will be triggerd....
</span>
于 2012-09-20T10:06:29.440 回答
1

也许与 jQuery ？你的 HTML ：

<img id="pic" src="pic.jpg" />

有了这个 jQuery ：

$('#pic').click(function() {
    // Your stuff here
});

而这个 CSS ：

#pic {
    cursor: pointer;
}

内联 css 和 js 从来都不是最好的方法。:)

于 2012-09-20T10:11:06.563 回答
0

使用一个类来识别您的触发对象（无论是锚点还是图像），然后对该对象执行点击处理：

说类名是“clickTrigger”，然后是你的 HTML：

<a href="#" style="background:url('pic.jpg');" class="clickTrigger"></a>

或者

<a href="#" class="clickTrigger"><img src="pic.jpg" /></a>

或者

<img style="cursor:pointer" class="clickTrigger" />

然后用 javascript/jQuery 附加到点击事件：

Javascript：

var element = this.getElementsByClassName('clickTrigger')[0];
element.onclick = function (event) {
    // handler
}

jQuery：

$('.clickTrigger').click(function (event) {
    // Handler
});
于 2012-09-20T10:10:34.813 回答