Question

我确定以前曾经问过这个问题，但我没有找到答案的运气。这可能是我不知道的一个术语。

jQuery事件处理程序可以返回除触发它之外的元素吗？

通常，当您触发元素的jQuery事件时，该元素将由事件处理程序返回。有没有办法返回不同的元素？（event.target，event.currentTarget等除外）

这是我的HTML：

<div id="content">
    <div id="wrapper">
        <div class="instance">
        </div>
    </div>
</div>

如果我为#wrapper制作自定义jQuery事件，我可以让它的事件处理程序返回.instance吗？

这是我的JavaScript：

$('#content').on('new.instance', '#wrapper', function(event) {
    var wrapper = $(event.currentTarget);
    var instance = wrapper.find('div.instance').first();

    var newInstance = instance.clone(true, true);
    newInstance.appendTo(wrapper);

    return newInstance;
});

var returnValue = $('#wrapper').trigger('new.instance');
console.log('returnValue.html():', returnValue.html()); // #wrapper, not .instance

我可以让new.instance事件处理程序返回.instance元素吗？如果是这样，我在代码中缺少什么？

Answer 1

.trigger()

... 的   当我们使用.on（）方法定义自定义事件类型时，.trigger（）的第二个参数可能会变得有用。

您只需将对象添加到.trigger方法作为第二个参数，然后在那里收集实例。

var instances = {data:[]};

$('#content').on('new.instance', '#wrapper', function(event, instances) {
  var wrapper = $(event.currentTarget);
  var instance = wrapper.find('div.instance').first();
  var newInstance = instance.clone(true, true);
  instances.data.push(newInstance);
  newInstance.appendTo(wrapper);
});

$('#wrapper').trigger('new.instance', instances);

console.log(instances.data[0].get(0));

// somewhere else at a latter time trigger new.instance again
setTimeout(function() {
  $('#wrapper').trigger('new.instance', instances);
  $.each(instances.data, function(index, item) {
    var counter = index + 1
    item.text( 'cloned instance ' + counter );
    console.log(item.get(0))
  })
}, 2000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
  <div id="wrapper">
    <div class="instance"></div>
  </div>
</div>

Answer 2

.instance位于event.chain，因此您可以在bubbling phase期间通过回调访问它。单击每个元素查看Snippet。

片段

var wrp = document.getElementById('wrapper');

wrp.addEventListener('click', function(e) {
  if (e.target != e.currentTarget) {
    var trueTarget = e.target.className;
    alert(trueTarget + ' has been clicked!');
  }
  e.stopPropagation();
}, false);

#content {
  border: 2px dashed grey;
  width: 50vw;
  height: 50vh;
  background: rgba(0, 0, 0, .3);
  text-align: right;
  color: white;
}
#wrapper {
  border: 3px dotted orange;
  background: rgba(0, 0, 0, .5);
  width: 50%;
  height: 50%;
  text-align: right;
  font-size: small;
  color: orange;
}
.instance {
  border: 1px solid yellow;
  width: 50%;
  height: 50%;
  background: rgba(0, 0, 0, .7);
  text-align: center;
  font-size: smaller;
  color: yellow;
  
}

<div id="content">
  CONTENT
  <div id="wrapper">
    WRAPPER
    <div class="instance">
      INSTANCE
    </div>
  </div>
</div>

覆盖事件处理程序中的返回值？

2 个答案: