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

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='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 2

如果你的目标是封装模板和方法之间的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

Answer 3

一种方法可能是通过确定默认是否应防止一个参数：

模板：

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

这种模式可以在扩大如果需要的话包括参数。