模板事件选择器“not”无效

Question

在此Meteor模板代码中，单击canvas时，它会将canvas元素打印到控制台，但预计不会触发该事件。

如果单击的元素不是canvas，如何触发它？

Template.myTemp.events({
  'click *:not(canvas)': function(e) {
  e.stopPropagation();
  console.log(e.target);
});

Answer 1

绝对是一个有趣的问题，因为Blaze支持:not选择器，并且可以与其他HTML元素一起使用。您可能希望在Blaze repo。

中打开相关问题

上面说过，有几种不同的方法可以解决这个问题。您可以在事件处理程序中添加一个检查，以确保您不对canvas相关事件执行任何操作：

Template.myTemp.events({
  'click *'(event, instance) {
    if (event.target.nodeName.toLowerCase() !== 'canvas') {
      // Handle non-canvas events ...
    }
  },
});

如果您希望能够专门过滤掉canvas个事件，则另一个选项涉及链接您的事件处理程序。例如：

Template.myTemp.events({
  'click canvas'(event, instance) {
    event.stopImmediatePropagation();
    // Handle canvas click events only ...
  },
  'click *'(event, instance) {
    // Handle all click events except canvas click events, since they're 
    // captured and handled above ...
  },
});