0

任务与这篇文章中的相同 ：捕获点击链接并阻止浏览器的默认行为。那里给出的答案是这样的：

模板：

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

这有可能吗？还是有其他不错的解决方案？

4

3 回答 3

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

或者，如果你想避免布尔陷阱，你可以这样做......

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

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

于 2014-02-21T21:34:06.170 回答
0

如果您的目标是封装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

于 2014-02-11T16:58:25.127 回答
0

我以这种方式解决了它，但我并不完全满意。

模板：

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

});
于 2014-02-10T20:44:21.130 回答