javascript - 允许一个元素继承另一个元素的所有事件

Question

例如，假设我有 2 个链接，A 和 B。如果用户将鼠标悬停在 A 上，将触发 B 的悬停事件。与所有其他事件类似，如 onlick、mouseover 等。

我不想像这样手动添加事件：

$('a#A').click(function(){
  $('a#B').trigger('click');
});

谢谢！

Answer 1

您可以使用多个事件执行此操作，如下所示：

$('a#A').on('click mouseenter mouseleave', function(e){
  $('a#B').trigger(e.type);
});

这将触发绑定在 上的任何指定事件#B，例如：

$("#B").on({
    mouseenter: function() {
        this.style.color = "#B4B4B4";
    },
    mouseleave: function() {
        this.style.color = "#000";
    }

});

小提琴

现在让这变得非常低效，让我们将所有事件绑定到#B并使用以下命令触发它们#A：

$("#B").on({
    mouseenter: function() {
        this.style.color = "#B4B4B4";
    },
    mouseleave: function() {
        this.style.color = "#000";
    }

});

var events = [];
$.each($._data($("#B").get(0), "events"), function(i, e) {
    events.push(i); //gets all events currently bound to #B
});

$('a#A').on(events.join(' '), function(e){  //and triggers them with #A
  $('a#B').trigger(e.type);
});

小提琴

Answer 2

$('linkDiv').each( function() {
  $('a#A').click( function() {
    $('a#B').trigger('click');}
  });

使用 foreach/each() jQuery 函数来指定您希望这两个事件发生在每个事件上，<div class="linkDiv">或者<a class="linkDiv">您想要这个事件发生。您的页面中的链接将如下所示：

<div class="linkDiv">
  <a class="link" id="A" href="foo.html">Foo</a>
  <a class="link" id="B" href="fap.html">Fap</a>
</div>