Question

我使用这样的点击监听器，这样点击转到link.php就会执行一些代码：

document.addEventListener('click', function(e) {    
    var tre = e.target.href || '';
    if( tre.indexOf("link.php") > -1) {
        alert('it worked');
    }
}, false);

这有效：

<a href="/link.php?destination=1" target="_blank">
    link text
</a>

但点击图片或div不要

<a href="/link.php?destination=1" target="_blank">
    <img src="/image.jpg">
    <span>link text</span>
</a>

因为点击位于图片和范围内，而不是<a>标记。最简单的方法是什么？

Answer 1

JavaScript确实有本地.closest() method（虽然它目前被认为是实验性的，并且浏览器支持有限）。您可以使用此方法来获取最接近的CREATE TABLE `element_fields` ( `id` int(10) UNSIGNED NOT NULL, `element_field_type_id` int(10) UNSIGNED NOT NULL, `api` varchar(255) NOT NULL, `label` varchar(255) NOT NULL, ) ENGINE=InnoDB DEFAULT CHARSET=utf8; CREATE TABLE `element_field_types` ( `id` int(10) UNSIGNED NOT NULL, `name` varchar(255) NOT NULL, `sql_type` varchar(255) NOT NULL, ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ALTER TABLE `element_fields` ADD PRIMARY KEY (`id`), ADD KEY `element_fields_element_field_type_id_foreign` (`element_field_type_id`), ADD KEY `element_fields_element_field_type_id_index` (`element_field_type_id`); ALTER TABLE `element_field_types` ADD PRIMARY KEY (`id`); ALTER TABLE `element_fields` ADD CONSTRAINT `element_fields_element_field_type_id_foreign` FOREIGN KEY (`element_field_type_id`) REFERENCES `element_field_types` (`id`);祖先元素（或元素本身，这意味着它可以在您提供的两种情况下都有效）。

Example Here

或者，您可以检查每个父节点是否为document.addEventListener('click', function(e) { var href = e.target.closest('a').href || ''; if (href.indexOf("link.php") > -1) { // ... } }, false);元素：

Example Here

另一种选择是将事件监听器直接附加到document.addEventListener('click', function(e) { var target = e.target while (target && target.tagName !== 'A') { target = target.parentNode; if (!target) { return; } } if (target.href.indexOf("link.php") > -1) { // ... } }, false);元素，然后访问currentTarget property以获取事件附加的元素（而不是而不是触发事件的元素）。但是，这只会将事件附加到单个a元素：

Example Here

即使它在div或img中，也可以点击链接

1 个答案: