[英]scope of 'this' for a javascript onclick event
我正在尝试使用this
功能来处理javascript onclick
事件。 目前,我只能使用this
返回dom节点。 是否可以将范围扩展到该dom节点之外? 我想调用功能toggleLayer
。 使用Dojo 1.7+
toggleLayer: function(){
console.log('toggled layer!!!');
},
_init: function() {
this.domNode.innerHTML = 'Click <a href="#"onclick="this.toggleLayer()">Here</a> to toggle layer';
}
编辑-这是我从Quentins答案中得出的解决方案:
toggleLayer: function() {
console.log('toggled layer!!!');
},
_init: function() {
this.domNode.innerHTML = ''; // Erase existing content
this.domNode.appendChild(document.createTextNode('Click '));
var link = document.createElement('a');
link.appendChild(document.createTextNode('Here'));
link.href = "#";
link.addEventListener('click', this.toggleLayer.bind(this));
this.domNode.appendChild(link);
this.domNode.appendChild(document.createTextNode(' to toggle layer'));
}
在这种情况下不行。 您正在通过创建字符串然后进行转换来生成DOM。 您从字符串中创建的函数将与您所处的范围完全没有关系。
请改用适当的DOM。
this.domNode.innerHTML = ""; // Erase existing content
this.domNode.appendChild(document.createTextNode("Click "));
var button = document.createElement("button"); // Don't use links to the top fo the page for this
button.appendChild(document.createTextNode("Here"));
button.addEventListener("click", this.toggleLayer.bind(this));
this.domNode.appendChild(button);
this.domNode.appendChild(document.createTextNode(" to toggle layer"));
将上下文绑定到函数的“ Dojo方法”是使用lang.hitch
:
hitch()返回一个函数,该函数将在给定的上下文中执行给定的函数。
https://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#hitch
这是使用纯Dojo完成的方式:
require([
'dojo/_base/lang',
'dojo/dom',
'dojo/dom-construct',
'dojo/on'
], function(
lang,
dom,
domConstruct,
on
) {
function onClick () {
console.log('Got clicked context: ', this)
}
var link = domConstruct.create('a', {
textContent: 'Click me!',
href: '#'
}, dom.byId('my-div'));
on(link, 'click', lang.hitch(this, onClick));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.