javascript - Prototype.js，调用invoke observe click，试图让元素被点击。范围混淆

Question

有没有办法使用“invoke”、“observe”和“click”作为参数来访问“invoke”当前正在迭代的项目？

我正在这样做：

1.

$$('.item').invoke('observe', 'click', function(event) {
    // I want to access the .item that was clicked in here
});

我可以

2.

$$('.item').first().observe('click', function(node) {
    // I can access the .item right here with 'node'
})

我什至可以

3.

    $$(".item").each(function(node) {
      node.observe('click', function(event) {
        // use 'node' here for the .item clicked
    });

但我想知道是否有办法做#1（速记方式），同时仍然访问被点击的元素。

有没有办法做到这一点？

Answer 1

找到了我的答案。

我正在寻找的是Event.element(event)，它返回调用事件的元素。

我还应该注意，为了在 event.element 上使用原型方法，您需要将其包装在原型选择器中，如下所示：

var element = $(Event.element(event))

Answer 2

查看Event.on代替 Event.observe：

$$('.item').invoke('on', 'click', '.item', function(event, el) {
    // el is the '.item' element
});

或者，您可以执行以下操作：

<div id="item-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

$('item-container').on('click', '.item', function(event, el) {
    // el is the '.item' element
    console.log(el.innerHTML);
});

这很好，因为您只在 #item-container 上设置了一个事件处理程序，它允许您添加/删除 .item 子项，而不必担心注册/取消注册事件处理程序。好的！

Answer 3

我的功能很好：

*Event.observe(document, 'click', respondToClick);
function respondToClick(e) {                    
    var el = e.element();
    var del = el.hasClassName('classIdDiv');
    var id = el.identify();
    if(del == true){
        Function_personal(id);
        return;
    }
}*