Question

由于受到限制，即使这是我完全避免的事情，在某种情况下我必须在achor标记的href属性中使用javascript：syntax。

（解释：在我的CMS中，我使用富文本编辑器允许用户更改文本元素，包括链接。在某些情况下，特定的javascript：调用是必需的，我禁止在链接编辑时完全点击功能（为了简化用户的过程）。但是，当其中一个链接出现在一个对onclick事件作出反应的块中时，该事件会引发双击）

像这样：

<a href="javascript:doSomething()"></a>

我的问题是这个链接位于已经响应onclick事件的容器内。因此我想将事件对象传递给doSomething（）方法，以便我可以使用jQuery的

event.stopPropagation()

方法。

不幸的是，似乎沿着

传递事件对象

<a href="javascript:doSomething(event)"></a>

似乎根本不起作用。 Firefox将报告 ReferenceError：未定义事件

时，Safari不会说任何内容

我认为是这种情况，因为href =“”不是脚本启动属性（例如onclick）。问题是，在这种情况下，我将无法访问超出我已经做过的标签。

因此我需要

1。）从href属性中将事件对象传递给doSomething（）函数的方法

或

2。）通过其他方式阻止事件在该锚点（点击后）传播的方法。

感谢您提供任何建设性意见！

Answer 1

您无法停止href属性的事件传播，因为：

执行href代码时，它不是事件。它只执行该代码，类似于“位置黑客”。就像在浏览器的地址栏中输入javascript:doSomething()一样。
href代码在事件触发链接后执行 - 包括冒泡。

您可以在this jsFiddle中看到该行为。请注意mouseup，mousedown和click都会在href代码执行之前为链接和单击链接时的容器触发。

如果您要阻止事件侦听器，则必须找到另一种方法。

但是，如果您可以将javascript附加到文档，则可以使用href屏蔽preventDefault()。

例如：

jQuery，版本1.7之前：

$("#container a").bind ("mousedown mouseup click", function (e) { e.preventDefault(); } );

jQuery 1.7及更高版本：

$("#container a").on ("mousedown mouseup click", function (e) { e.preventDefault(); } );

或（更好）：

$("#container").on ("mousedown mouseup click", "a", function (e) { e.preventDefault(); } );

你可以see this last version live at jsFiddle。

Answer 2

如果您无法改变链接本身（使用onclick），那么您唯一的选择就是更改容器的onclick处理程序。

你能做点什么吗

function containerClickHandler(e) {
  e = e || event;
  var el = e.target || e.srcElement;
  if (el.nodeName === 'A' && someOtherMatchChecks) {
       // eat event
  }
  else {
       // process event
  }
}

Answer 3

嗯，这是一个老问题，但在我的特定情况下，我确实发现了它周围的黑客，但它可能只适用于一部分情况。我有一个有onclick的div。但如果单击div中的内部，我不希望触发div的onclick。这是我的工作：

function myOnClick () {

  // loop over all <a>'s, and test if they are hovered over right now.
  var allLinks = document.links;
  var dont = 0;
  for (var i = 0, n = allLinks.length; i < n; i++) {
    // pure javascript test to see if element is hovered.
    if(allLinks[i].parentElement.querySelector(":hover") === allLinks[i]) {dont = 1; }
  };

  if(dont)return;

  // your stuff here, only fires when dont is false.

}

我在这里了解了queryselector技巧：https://stackoverflow.com/a/14800287/2295722

Answer 4

如果你在href属性中编写javascript，我不知道是否有办法获取参数。但你可以在onclick中得到它，但正如你所说这不是最好的做法：

<a onclick="console.log(arguments)">your link</a>

在arguments数组中，你将得到你的事件对象。

这是给你的演示：

http://jsfiddle.net/tEw5J/1/

如何在不使用onclick或onmousedown的情况下从锚点的href属性中停止事件传播

4 个答案: