[英]Why JavaScript Performs “click” event, when I don't click on the item?
I added eventListener
on DOM
object using JS
, but this listeners triggers, as soon as page is loaded and it doesn't have sense, when I'm clicking on this item. 我使用
JS
在DOM
对象上添加了eventListener
,但是当我单击此项目时,一旦页面加载并且没有意义,此侦听器就会触发。
This is my code, where I'm adding eventListener
to the item: 这是我的代码,在其中
eventListener
项目添加eventListener
:
let table = document.getElementById('data_table' + deal);
for (let r = 0, n = table.rows.length; r < n; r++) {
table.rows[r].cells[2].addEventListener("click", logThis(this));
}
and my function
which should be execute on item click, looks like this: 我的
function
应该在项目单击时执行,如下所示:
function logThis(me) {
console.log(me);
}
When browser renders page, clicking is performing itself, without my interference. 当浏览器呈现页面时,单击会自动执行,而不会受到我的干扰。 Please, if anyone here knows, why it happens, write the answer.
请,如果这里有人知道为什么会发生,请写下答案。
EDIT 编辑
When I'm clicking, on table cell
, nothing happens 当我单击表格
cell
,什么也没有发生
I had the same problem. 我有同样的问题。 You need to create a function in the addEventListener and than call your method.
您需要在addEventListener中创建一个函数,然后调用您的方法。
table.rows[r].cells[2].addEventListener("click", function () {logThis(this)});
function logThis(me) {
console.log(me);
}
That should do the trick. 这应该够了吧。
Adding my comment as an aswer here to help other beginners get into this issue. 在此处添加我的评论,以帮助其他初学者解决此问题。 Here you have mixed both
addEventListener
signature and the way you add onclick
handlers in HTML. 在这里,您混合了
addEventListener
签名和HTML中添加onclick
处理程序的方式。
When you attach an eventListener using JS, you dont have to invoke the function(ie no need to use the parenthesis). 当您使用JS附加一个eventListener时,您不必调用该函数(即,无需使用括号)。 So your code will be like this:
table.rows[r].cells[2].addEventListener("click", logThis);
所以您的代码将如下所示:
table.rows[r].cells[2].addEventListener("click", logThis);
When you attach an event handler from HTML you do this: <td onclick="logThis()">Click me</td>
Here you need to pass the string with function invocation. 当您从HTML附加事件处理程序时,您可以执行以下操作:
<td onclick="logThis()">Click me</td>
在这里,您需要通过函数调用传递字符串。
You can also use a global event listener on your table with event delegation 您还可以在表上使用带有事件委托的全局事件监听器
document.querySelector('#my-Table').onclick =e=>{ if ( e.target.tagName.toLowerCase() != 'td') return if ( e.target.cellIndex !=2 ) return console.clear() console.log('=>', e.target.textContent , ' is clicked !') }
table { border-collapse: collapse} td { border: 1px solid grey; padding: .3em .5em;}
<table id="my-Table"> <tbody> <tr><td>aa</td><td>bb</td><td>cc</td><td>dd</td></tr> <tr><td>ee</td><td>ff</td><td>gg</td><td>hh</td></tr> <tr><td>ii</td><td>jj</td><td>kk</td><td>ll</td></tr> </tbody> </table> <p> this get click only on row 2 ( cc / gg / kk ) </p>
Despite founding of issue, why my code wasn't working, (I was invoking function) I still was not able to add eventListener
to the DOM
element. 尽管发现了问题,但为什么我的代码无法正常工作,(我正在调用函数)我仍然无法将
eventListener
添加到DOM
元素中。 So, I tried to set attribute
to this element using JavaScript
and now it works. 因此,我尝试使用
JavaScript
将attribute
设置为此元素,现在它可以工作了。 I'm afraid, that this is not best solution, but It is still kinda way to accomplish my aim. 恐怕这不是最好的解决方案,但这仍然是实现我的目标的一种方法。
let table = document.getElementById('data_table' + deal);
for (let r = 0, n = table.rows.length; r < n; r++) {
table.rows[r].cells[2].setAttribute("onclick", "logThis(this)");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.