左键单击激活onclick，右键单击激活href答案

【问题标题】：left click to activate onclick and right click to activate href左键单击激活onclick，右键单击激活href
【发布时间】：2013-06-18 06:40:56
【问题描述】：

我有一个 img 标签（当然不是完全正确的语法）

<img src="http://localhost/img/img_1.png" id=1 onclick="say_hi(id)" href="/img_page_1/" alt="Aim Pic" width="230" height= "164" />

我需要的是当用户左键单击 img 时，我需要触发 onClick，当用户右键单击它时，它必须像一般的 href 显示选项（“在新窗口中打开”等）

为什么我需要它，我想通过模糊页面的其余部分（这里使用 ajax 在 say_hi 函数中加载图像页面的预览）以及当用户右键单击时在主页中显示与图像相关的页面预览我希望它感觉像一个普通的href，这样他就可以直接在其他选项卡中打开页面而不是预览。

编辑：简单来说，我想声明/写入/提供指向某些图像的链接，该图像在右键单击时通常充当链接（显示包含链接所有选项的上下文菜单），但它必须触发 onClick 事件（或运行javascript中的函数）左键单击时。

谢谢。

【问题讨论】：

href 不是img 标签的有效属性
还有：你试过什么？

标签： javascript html ajax css onclick

【解决方案1】：

删除了对问题编辑的回复。

新的编辑要简单得多，请参阅以下内容（以 inline-JavaScript 为例 - 这是不好的做法，不应在任何生产代码中使用 - 请参阅 here 和 @987654322 @了解更多信息。）：

HTML/内联-JS：

<a href="/img_page_1/" onclick="left_click(id)">
  <img src="http://localhost/img/img_1.png">
</a>

首先，href 不是图像的有效属性 - 将其提供给锚点 (<a>)，然后您可以环绕图像。

只有左键会触发你的功能，右键仍然是默认行为。

功能：

function left_click(id) {
  event.preventDefault(); // Prevents the default anchor action.
  // Rest of your function here.
}

在这里，我们防止锚点触发的默认行为 - 阻止链接将您带到不同的页面。

jsFiddle example.

【讨论】：

感谢您的回复，我不想在用户单击元素时做任何事情，我只想让浏览器显示在新标签页中打开等选项，这些选项通常在使用 href 时显示，但在我的情况我看不到在新选项卡中打开选项我只能看到好像我正在右键单击普通图像（仅在新选项卡中打开图像和一些与图像相关的东西）。我希望我现在更清楚一点。
是的，确实，我希望它以某种方式触发，简单来说，我希望在左键单击时运行一个函数，当右键单击它时，它必须像我右键单击一个链接。
@MohanKrishna 是的，我在回答中说过，您只需要根据您的情况进行调整即可。你没有检查我的 jsFiddle 吗？
所以我要找的是 event.preventDefault();我尝试了您在上述评论中所说的相同操作，但没有使用 event.preventDefault();所以它正在触发 onclick 事件，但同时甚至在导航，所以看起来它只是在导航而不是在左键单击时触发 onclick 事件。非常感谢:)
@MohanKrishna 当然我为你提供了两个链接，真的很有帮助:)

【解决方案2】：

你需要通过事件对象的button成员来区分鼠标按键：

var left, right;
left = mie ? 1 : 0;
right = 2;

var clickHandler = function (e){
    if(e.button === left){
       // do onClick stuff and return
    }
    else if(e.button === right){
       // show your context menu
    }
}, false);

但是如果我没有误解你想要做什么的话，这看起来你可以简单地将你的链接设置为<a href="" onClick="clickHandler">description</a>。

【讨论】：