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

时间:2014-02-10 17:01:23

标签: events proxy ractivejs

任务与中的相同 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!' );
});

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

3 个答案:

答案 0 :(得分: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 );
  }
});

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

答案 1 :(得分: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);

});

答案 2 :(得分: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