Question

我正在尝试使用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'));

}

Answer 1

不是这种情况。您通过创建字符串然后转换它来生成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"));

Answer 2

将上下文绑定到函数的“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));  

});

javascript onclick事件的'this'范围

2 个答案: