获取actionEvent处理的父div的最简单方法是什么？

作者: 岁爵
发布时间: 2023-12-26 12:37:10 (8月前)
转自：

6 条回复

0#
回复此人
我头上有犄角 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是一种方法： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> const buttons = document.querySelectorAll("button"); buttons.forEach(el => { el.addEventListener("click", evt => { let button = evt.target; console.log({ row: button.closest("tr").classList[1], columns: button.closest("td").classList[1] }); }); }); </code> </pre> <pre class="snippet-code-css lang-css prettyprint-override"> <code> button { display: block; height: 20px; width: 20px; } button:hover, button:focus, button:active { background-color: blue; cursor: pointer; } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <table id="board"> <tr class="row 0"> <td class="col 0"><button></button><td> <td class="col 1"><button></button><td> <td class="col 2"><button></button><td> </tr> <tr class="row 1"> <td class="col 0"><button></button><td> <td class="col 1"><button></button><td> <td class="col 2"><button></button><td> </tr> <tr class="row 2"> <td class="col 0"><button></button><td> <td class="col 1"><button></button><td> <td class="col 2"><button></button><td> </tr> </table> </code> </pre> </DIV> </DIV> <P> </p> <P> 使用的好处 <code> closest() </code> 您是否不必担心将来更改标记。我也建议使用 <code> addEventListener() </code> 代替 <code> onclick </code> 因为你可能无意中覆盖了另一个点击事件 <code> onclick </code> 因为它在全球范围内（见 <a href="https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice"> 为什么在HTML中使用onClick（）是一种不好的做法？ </A> ）。 </p> <P> 注意： <code> closest() </code> 需要IE 11中的polyfill（ - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill" rel="nofollow noreferrer"> https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill </A> ） </p> </DIV>

编辑
1#
回复此人
筱梨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以尝试将事件侦听器添加到tr元素，然后访问target和currentTarget的父级 </p> <pre> <code> for (var trEL of document.querySelectorAll('tr')) { trEl.addEventListener('click', event => { if (event.target.tagName === 'button') { move(event.target.parentNode, event.currentTarget) } }); } </code> </pre> </DIV>

编辑
2#
回复此人
听风～ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> jQuery方式（需要在页面上插入JS lib）： </p> <pre> <code> $('button').on('click', () => { this.parentNode.parentNode; //Retrieves TR tag of the individual button move("insert button row", "insert button column"); }); </code> </pre> <P> 非jQuery方式： </p> <pre> <code> document.querySelectorAll('button').forEach((e) => { console.dir(e); //Reads out of all properties and methods of element in console //Inserts click event listener logic if you please e.parentNode.parentNode; //Retieves the TR tag of the button move("insert button row", "insert button column"); }); </code> </pre> </DIV>

编辑
3#
回复此人
v-star*위위 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你需要遍历所有按钮。你必须分配一个功能 <code> onclick </code> ，而不是调用函数。在该功能内，您可以使用 <code> this </code> 引用被点击的按钮， <code> parentElement </code> 获取包含元素，和 <code> rowIndex </code> 和 <code> cellIndex </code> 获得他们在桌子上的位置。 </p> <pre> <code> document.querySelectorAll('button').forEach(function(b) { b.addEventListener('click', function() { var col = this.parentElement.cellIndex; var row = this.parentElement.parentElement.rowIndex; move(row, col); }); }); </code> </pre> </DIV>

编辑
4#
回复此人
敢嫁就敢娶 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 您可以使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode" rel="nofollow noreferrer"> <code> parentNode </code> </A> 获取特定元素的父元素。 </p> <P> 见下面的例子。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> document.querySelectorAll('button').forEach(function (e) { e.onclick = function () { console.log(`This is ${e.nodeName}`); console.log(`My dad is ${e.parentNode.nodeName}`); console.log(`My grandpa is ${e.parentNode.parentNode.nodeName}`); } }); </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <table id="board"> <tr class="row 0"> <td class="col 0"><button></button><td> <td class="col 1"><button></button><td> <td class="col 2"><button></button><td> </tr> <tr class="row 1"> <td class="col 0"><button></button><td> <td class="col 1"><button></button><td> <td class="col 2"><button></button><td> </tr> <tr class="row 2"> <td class="col 0"><button></button><td> <td class="col 1"><button></button><td> <td class="col 2"><button></button><td> </tr> </table> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑

登录后才能参与评论