Question

这是我的代码：

The action 'index' could not be found for VotesController

navItem.addEventListener("click",redirector);

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

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

我正在使用babel，因此浏览器获得的是常规功能。
我甚至没有收到错误，浏览器只是忽略它。

另外，我正在调用Browserify本地需要的代码。

Answer 1

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

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

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

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

Answer 2

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

＆＃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;

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

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

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

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

2 个答案: