将click函数绑定到具有原型的锚点标记内的所有元素

Binding click function to all elements within an anchor tag with prototype

本文关键字：元素 原型 函数 click 绑定      更新时间：2023-09-26

我有这样的html：

<ol id="test-ol">
    <li>
        <a href="http://example.com">
            <span class="myspan">test</span>
            not in span
            <span class="myspan">test2</span>
        </a>
    </li>
    ...
</ol>

以及以下JavaScript（原型）：

$$('#test-ol a').each(function(narrowByElement){
    Event.observe($(narrowByElement),'click',onToolbarClick.bind(this));
});
onToolbarClick = function(event){
    var href = Event.element(event).readAttribute('href');
    console.log(href);
    Event.stop(event);
}

单击锚点标记中的非span部分将记录正确的href，但单击span中的"test"部分将返回null。

那么，我如何将我的点击函数绑定到锚标记中的所有元素呢？

试试这个：

Event.on('test-ol', 'click', 'a', onToolbarClick);


onToolbarClick = function(event, element){
    var href = element.readAttribute('href');
    console.log(href);
    event.stop();
}

有关更多详细信息，请查看Event.on的文档，特别是selector和callback参数的说明。

onToolbarClick = function(event){
    var href = this.getAttribute('href');
    console.log(href);
    Event.stop(event);
}

原型1.6.0及更高版本。

相关文章：