如何从父元素触发href单击事件

Question

下面的代码我想点击a从父标签点击事件li的标签。 但它给了我这个错误：

为什么我要这样做：

当我单击PHP PDO链接时，我们需要光标移动到该文本而不是li标签。 我正在尝试用它修复它。 但我知道我们可以通过获取a href属性并将其设置为window.location.href从li click事件中调用该href 。 但是当我点击li标签时仍然试图触发a href click事件。

HTML

<li class="tags" style="cursor: pointer;">
    <a class="link_em" href="?l=1" id="1">List1</a>
</li>

jQuery的：

$('li.tags').on('click', function (e) {
    $(this).children('a').click();
    return false;
});

错误：

当我使用上面的代码时，我收到此错误。

 Uncaught RangeError: Maximum call stack size exceeded

用户界面：

https://jsfiddle.net/k92dep45/

编辑：

我做了这个丑陋的事情，但我仍然在寻找合适的解决方案：

$('li.tags a').on('click', function (e) {
   e.stopPropagation();
});
$('li.tags').on('click', function (e) {
  window.location.href = $(this).children('a.link_em').attr('href');
  e.preventDefault();
});

Answer 1

您可以使用以下版本的上述代码

$('li.tags').on('click', 'a', function (e) {
// Do your stuff.
e.preventDefault();
   window.location.href= thishref;
});

这里的第二个参数是jQuery的click事件中的子节点'a'。

问题是你不断调用导致Maximum call stack size exceeded的相同元素。

请看下面的例子。

function foo(){
   foo();
}

foo();

在上面的代码中，我们一次又一次地调用foo() ，它也会产生相同的结果。

Answer 2

您可以通过改变采取不同href的的window的href存储在您的a标签，通过使用该指令getted：

$(this).children('a').attr("href");

尝试实现，或运行以下代码片段以确认它是否解决了您的问题并获得了预期的渲染：

 $('li.tags').on('click', function (e) { window.location.href= $(this).children('a').attr("href"); return false; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <li class="tags" style="cursor: pointer;"> <a class="link_em" href="?l=1" id="1">List1</a> </li> 

Answer 3

您需要添加event.stopPropagation()上的a元素，防止事件“冒泡”，否则你创造无限的循环，这就是为什么你得到这个错误。

 $('li.tags').on('click', function() { $(this).children('a').click(); }); $('li.tags a').click(function(e) { e.stopPropagation() e.preventDefault() // This is just for demo console.log($(this).text()) }) 

 a { border: 1px solid black; } li { padding: 50px; border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="tags" style="cursor: pointer;"> <a class="link_em" href="?l=1" id="1">List1</a> </li> </ul> 

Answer 4

编辑

重读这个问题之后，我认为OP已经过了复杂的事情（显然我也是如此）。 添加了一个简单版本的Demo 1，标记为Demo 2.并添加了Demo 3，这是一个不使用JavaScript / jQuery的解决方案。

捕获阶段

当您需要对事件链进行细粒度控制时， .addEventListener()更适合处理特定方面，例如在捕获阶段而不是冒泡阶段触发事件。 究其原因，就是因为li.tag会前a.link事件链的第一阶段（即捕获阶段）。 我们通过为第三个参数指定适当的布尔值来分配捕获或冒泡阶段：

document.addEventListener('click', function(e) {...}, false);

这是默认值，对于冒泡阶段设置为false 。

document.addEventListener('click', function(e) {...}, true);

这将使注册的对象（例如，在该示例中的document ）监听并在捕获阶段上行动。 以下演示 - 在捕获阶段 - 将：

1. 将点击的li.tag指定为event.target ...
2. ...然后调用e.stopPropagation()所以a.link嵌套内li.tag将不会被包含在事件链。 冒泡阶段也被跳过。
3. 相反，这个a.link成为新事件链上的e.target ，因为在它上面调用了触发器方法.click() 。

---

测试

List0的第3个链接测试a.link是否确实由a.link .click()触发或在捕获或冒泡阶段触发，或者是event.target 。 因为List0中的每个a.link都有pointer-events:none ，这使得a.link无视用户的任何鼠标或click事件，我们可以得出结论：

1. 所述a.link任何激活完全取决于用户点击其父li.tag 。

2. 在捕获阶段，由于e.stopPropagation()和pointer-events:none ，没有任何点击事件会到达a.link pointer-events:none它不能是e.target 。

3. 由于e.stopPropagation()冒泡阶段甚至不存在a.link

4. 当事件链a.link时， a.link .click()被a.link ， a.link像第二阶段火箭一样熄灭

当点击第3个列表项的任何位置时，我们得到以下结果：

• log： Target: LI
• 不跳转到List2

单击List0的第一个或第二个列表项时，我们得到以下结果：

• log： LinkID: {0-1 or 0-2}
• 日志： Target: A
• log： Target: LI
• 跳转到List1或List2

---

错误

在小提琴中，有2个无效HTML实例：

错误1： <ui>

正确： <ul>

错误2：所有<a>具有相同的ID，所有id必须是唯一的

   <a class="link_em" href="?l=1" id="1">List1</a>

   <a class="link_em" href="?l=2" id="1">List2</a>

正确：

   <a href='#l1-1' class='link' id='0-1'></a>

   <a href='#l1-2' class='link' id='0-2'></a>

您会注意到HTML中的类和ID略有不同，但只要您注意上面提到的错误，就可以更改回自己的类。

---

演示1

 document.addEventListener('click', function(e) { if (e.target.className === 'tag') { e.stopPropagation(); var link = e.target.querySelector('a'); console.log('ID: ' + link.id); link.click(); console.log('Target: ' + e.target.tagName); return false; } else { console.log('Target: ' + e.target.tagName); return false; } }, true); 

 ul { height: 90px; outline: 1px solid red; } li { height: 30px; outline: 1px solid blue; cursor: pointer } .link { display: block; width: 10px; height: 10px; background: red; pointer-events: none; cursor: default; position: relative; z-index: 1; } b { float: left; } hr { margin-bottom: 1500px } .as-console { position: fixed; bottom: 30px; right: 0; max-width: 150px; color: blue; } .top { width: 100px; pointer-events: auto; } 

 <h1>Capture Phase Demo</h1> <details> <summary>Test</summary> <p>Third list item is not a .tag.</p> <dl> <dt>Results:</dt> <dd>Logged: "Target: LI"(or "Target: "B")</dd> <dd>Did not log: "ID:0-2"</dd> <dd>Did not jump to List2</dd> <dt>Conclusion:</dt> <dd>Links on List0 do not respond to mouse or click events from user. Therefore in order to jump from List0 the link must be triggered programmatically.</dd> </dl> </details> <h2 id='l1-0'>List0</h2> <ul> <li class='tag'> <a href='#l1-1' class='link' id='0-1'>List1</a> </li> <li class='tag'> <a href='#l1-2' class='link' id='0-2'>List2</a> </li> <li> <a href='#l1-2' class='link' id='0-2'>Test</a> </li> </ul> <b>1500px to List1 🔻</b> <hr> <h2 id='l1-1'>List1</h2> <ul> <li><a class='top' href='#l1-0'>Back to Top</a></li> <li>Item</li> </ul> <b>1500px to List2 🔻</b> <hr> <h2 id='l1-2'>List2</h2> <ul> <li> <a class='top' href='#l1-0'>Back to Top</a> </li> <li>Item</li> </ul> 

---

演示2

 document.addEventListener('click', function(e) { if (e.target.className === 'tag') { e.stopPropagation(); e.target.querySelector('a').click(); } }, true); 

 ul { height: 100px; outline: 1px solid red } li { height: 100%; cursor:pointer; } 

 <h1 id='list0'>List0</h1> <ul> <li class='tag'> <a href='#list1'>List1</a> </li> </ul> <hr> <h1 id='list1'>List1</h1> <ul> <li class='tag'> <a href='#list0'>List0</a> </li> 

演示3

 ul { height: 100px; outline: 1px solid blue } li { height: 100%; padding: 0 } a { display: block; height: 100%; width: 100%; } 

 <h1 id='list0'>List0 <h1> <ul> <li> <a href='#list1'>List1</a> </li> </ul> <hr> <h1 id='list1'>List1 <h1> <ul> <li> <a href='#list0'>List0</a> </li> </ul>