Question

任务与中的相同 this post：捕获点击链接并阻止浏览器的默认行为。给出的答案是：

模板：

<a on-click='sayHello' href="#">Activate!</button>

JS：

ractive.on( 'sayHello', function ( event ) {
  event.original.preventDefault();
  alert( 'Hello world!' );
});

问题是sayHello事件处理程序不应该知道原始事件是什么。代理的全部要点是事件处理程序不应该关心原始事件的类型。例如，我将链接更改为按钮，不再需要preventDefault。

所以，我的问题是如何在触发事件代理之前或之后调用preventDefault。

一个很好的解决方案是连续激活几个事件代理（如果可能的话）：

模板：

<a on-click='preventDefault;sayHello' href="#">Activate!</button>

JS：

ractive.on( 'preventDefault', function ( event ) {
  event.original.preventDefault();
});
ractive.on( 'sayHello', function ( event ) {
  alert( 'Hello world!' );
});

这有可能吗？或者还有其他一些不错的解决方案吗？

Answer 1

一种方法可能是传递一个参数来确定是否应该阻止默认值：

<强>模板：

<a on-click='sayHello:true' href="#">Activate!</a>
<button on-click='sayHello'>Activate!</button>

<强>码

ractive.on( 'sayHello', function ( event, shouldPreventDefault ) {
  if ( shouldPreventDefault ) {
    event.original.preventDefault();
  }
  alert( 'Hello world!' );
});

或者，如果你想避免boolean trap你可以做......

<a on-click='sayHello:{preventDefault:true}' href="#">Activate!</a>

......等等。

链接事件是一个有趣的想法。我不相信它属于图书馆，但你当然可以做像

这样的事情

<强>模板：

<a on-click='multiple:["preventDefault","sayHello"]' href='#'>Activate!</a>

<强>码

ractive.on( 'multiple', function ( event, sequence ) {
  var eventName, i, len;

  len = sequence.length;
  for ( i = 0; i < len; i += 1 ) {
    this.fire( sequence[i], event );
  }
});

如果需要，可以扩展此模式以包含参数。

Answer 2

我这样解决了，但我并不完全满意。

模板：

<a on-click='pd_and:sayHello' href="#">Activate!</button>

JS：

ractive.on( 'pd_and', function ( event, next ) {
  event.original.preventDefault();
  var i = args.indexOf(':'), arg;
  if (i === -1) {
    type = next;
    arg = undefined;
  } else {
    type = next.substr(0, i);
    arg = next.substr(i + 1);
  }
  return ractive.fire(type, event, arg);

});

Answer 3

如果您的目标是在模板和方法之间封装preventDefault，那么您可以滚动自己的代理事件：

Ractive.events.clickpd = function ( node, fire ) {
    node.addEventListener('click', click)

    function click(e){
        e.preventDefault()
        fire({ 
           node: node,  //breaks Ractive if not included
           original: e  //optional
        })
    }
    return { 
        teardown: function () {
            node.removeEventListener('click', click)
        } 
    }
}

并像这样使用它：

<a on-clickpd='sayGreeting'>{{greeting}}</a>

有关完整示例，请参阅http://jsfiddle.net/ka2Pu/2/。

自定义活动的文档位于：http://docs.ractivejs.org/latest/ractive-events

如何在触发代理事件之前执行preventDefault？

3 个答案: