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";
    }

});

FIDDLE

现在要使效率非常低，让我们将所有事件绑定到#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);
});

FIDDLE

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>

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

2 个答案: