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

How to stop event propagation from within an anchor's href attribute without using onclick or onmousedown

提问by SquareCat

Due to restrictions, even though it is something i avoid altogether, in a certain situation i have to use the javascript: syntax in a href attribute of an achor tag.

由于限制，即使我完全避免这样做，在某些情况下我必须在 achor 标签的 href 属性中使用 javascript: 语法。

(EXPLANATION: In my CMS i use a rich text editor to allow the user to make changes to text elements, including links. In some cases specific javascript: calls are required and i banned onclick completely from the link editing features (to simplify the process for the user). However, as one of the links appears within a block that reacts to an onclick event, the thing double-fires)

（说明：在我的 CMS 中，我使用富文本编辑器来允许用户更改文本元素，包括链接。在某些情况下，需要特定的 javascript: 调用，并且我完全禁止了链接编辑功能中的 onclick（以简化过程）对于用户）。但是，当其中一个链接出现在对 onclick 事件做出反应的块中时，事情会双重触发）

Like this:

像这样：

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

My problem is that this link is inside a container that already reacts to an onclick event. Therefore i wanted to pass the event object along to the doSomething() method, so that i could then use jQuery's

我的问题是此链接位于已经对 onclick 事件做出反应的容器内。因此我想将事件对象传递给 doSomething() 方法，这样我就可以使用 jQuery 的

event.stopPropagation()

method.

方法。

Unfortunately however, it seems that passing the event object along

然而不幸的是，似乎传递事件对象

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

does not seem to work at all. Safari won't say anything while Firefox will report ReferenceError: event is not defined

似乎根本不起作用。Safari 不会说什么，而 Firefox 会报告ReferenceError: event is not defined

I assume that this is the case because href="" is not a script-initiating attribute (such as onclick). The problem is that in this situation i won't be able to access the tag beyond what i already do.

我认为这是因为 href="" 不是脚本启动属性（例如 onclick）。问题是，在这种情况下，除了我已经做的事情之外，我将无法访问标签。

Therefore i either need

因此我要么需要

1.) A way to pass the event object to the doSomething() function from within the href attribute

1.) 一种将事件对象从 href 属性内传递给 doSomething() 函数的方法

or

或者

2.) A way to stop the event propagation right in that anchor (after its clicked) by other means.

2.) 一种通过其他方式在该锚点（点击后）中停止事件传播的方法。

Thank You for any constructive input!

感谢您的任何建设性意见！

回答by Brock Adams

You cannot stop event propagation from the hrefattribute because:

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

1. When the hrefcode executes, it is not an event. It just executes that code, similar to the "location hack". Like entering javascript:doSomething()in the browser's address bar.

2. The href code executes afterthe events fire on the link -- including bubbling.

   You can see that behavior in this jsFiddle. Note that mouseup, mousedown, and clickall fire both for the link, and on the container when the link is clicked, before the hrefcode executes.

1. 当href代码执行时，它不是一个事件。它只是执行该代码，类似于“位置黑客”。就像javascript:doSomething()在浏览器的地址栏中输入一样。

2. href 代码在链接上的事件触发后执行——包括冒泡。

   你可以在这个 jsFiddle 中看到这种行为。请注意，在代码执行之前mouseup，mousedown、 和click都为链接触发，并在单击链接时在容器上触发href。

If there are event listeners that you want to block, you'll have to find another way.

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

---

---

But, if you can append javascript to the documentyou can block the hrefusing preventDefault().

但是，如果您可以将 javascript 附加到文档中，您可以阻止href使用preventDefault().

For example:

例如：

• jQuery, before version 1.7:

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

• jQuery 1.7 and later:

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

  or (better):

  $("#container").on ("mousedown mouseup click", "a", function (e) {
      e.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();
  } );
  

You can see this last version live at jsFiddle.

你可以在 jsFiddle 看到最后一个版本。

回答by Peter Wilkinson

If you cannot alter the link itself (to use onclick) then your only option is to alter the onclick handler of the container.

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

Can you do something like

你能做类似的事情吗

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

回答by wessel

Well, this is an old question, but in my particular case I did find a hack around it, but it might only apply to a subset of situations. I have a div that has an onclick. But if an inside that div is clicked, I don't want that div's onclick to fire. Here is what I do:

嗯，这是一个老问题，但在我的特殊情况下，我确实找到了一个解决方法，但它可能只适用于一部分情况。我有一个具有 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.

}

I learned about the queryselector trick here: https://stackoverflow.com/a/14800287/2295722

我在这里了解了查询选择器技巧：https://stackoverflow.com/a/14800287/2295722

回答by Sinan

I don't know if there is a way to get the arguments if you write your javascript in href attribute. But you can get it as following in onclick, but as you say this isn't the best practice:

如果您在 href 属性中编写 javascript，我不知道是否有办法获取参数。但是您可以在 onclick 中按以下方式获得它，但是正如您所说，这不是最佳做法：

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

in arguments array you'll get your event object.

在参数数组中，您将获得事件对象。

here is a demo for you:

这是一个演示给你：

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

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