addEventListener单击不起作用,不影响元素

时间:2018-01-20 18:40:52

标签: javascript events click addeventlistener

这是我的代码:

The action 'index' could not be found for VotesController

let navi = document.createElement("nav"); let navItems = { home:"/", my_profile:"/me" }; let btnClasses = ["bttn-minimal","bttn-md","bttn-primary"]; const redirector = ()=>{ window.history.pushState(null,null,this.getAttribute("data-to")); }; for(let i in navItems){ let navItem = document.createElement("button"); for(let c=0;c<btnClasses.length;c++){ navItem.classList.add(btnClasses[c]); } navItem.innerHTML = i.toUpperCase().replace(/_/g," "); navItem.setAttribute("data-to",navItems[i]); navItem.classList.add("navi-item"); navItem.addEventListener("click",redirector); navi.appendChild(navItem); } document.getElementById("navi").appendChild(navi);无效。脚本标记位于body标记的末尾。我也尝试过使用

navItem.addEventListener("click",redirector);

并且它是一样的。不仅它不起作用我无法在chrome dev工具中看到事件监听器。请帮忙。

我尝试使用常规功能,但它是一样的。有两个原因:

  1. 我正在使用babel,因此浏览器获得的是常规功能。
  2. 我甚至没有收到错误,浏览器只是忽略它。
  3. 另外,我正在调用Browserify本地需要的代码。

2 个答案:

答案 0 :(得分:0)

您的问题是您使用Arrow function作为事件处理程序。

箭头函数没有自己的this对象;相反,他们使用围绕它们的this范围。

如果在事件处理程序中需要this,请使用常规函数而不是箭头函数。

const redirector = function () {
    window.history.pushState(null,null,this.getAttribute("data-to"));
};

答案 1 :(得分:0)

您的事件监听器工作正常:

&#13;
&#13;
let navi = document.createElement("nav");

let navItems = {
	home:"/",
	my_profile:"/me"
};

let btnClasses = ["bttn-minimal","bttn-md","bttn-primary"];

const redirector = ()=>{
  alert('click!');
	//window.history.pushState(null,null,this.getAttribute("data-to"));
};


for(let i in navItems){
	let navItem = document.createElement("button");
	for(let c=0;c<btnClasses.length;c++){
		navItem.classList.add(btnClasses[c]);
	}
	navItem.innerHTML = i.toUpperCase().replace(/_/g," ");
	navItem.setAttribute("data-to",navItems[i]);
	navItem.classList.add("navi-item");
	navItem.addEventListener("click",redirector);
	navi.appendChild(navItem);
}

document.getElementById("navi").appendChild(navi);
&#13;
<div id="navi"></div>
&#13;
&#13;
&#13;

但是,正如Xufox和PeterMader提到this没有引用点击的按钮......

您可以通过这种方式解决方法:

const redirector = e => {
  window.history.pushState(null, null, e.target.getAttribute("data-to"));
};