Question

我有这样的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);
}

单击锚标记内的非跨度部分将记录右侧href，但单击跨度内的“test”部分将返回null。

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

Answer 1

试试这个：

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参数的说明。

Answer 2

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

原型1.6.0及更高版本。

使用原型将单击函数绑定到锚标记内的所有元素

2 个答案: