javascript - AngularJS 中的 Jquery 鼠标 onclick

Question

我正在处理一个同时使用 JQuery 和 AngularJS 的页面。使用 jQuery taggable-text.js 插件，我可以通过鼠标单击和键盘选择“共享”项目。

但是当我尝试选择表内的元素(在 AngularJS 的范围内)时，我只能使用键盘按钮来做到这一点。

任何人都可以解释为什么“onclick”事件在 AngularJS 范围内不触发，但其他事件却触发？

附加了以下事件(JSFiddle JS block 中的第 296-303 行):

this.listView = new ListView($list, this);
this.strategies = strategies;
this.$el.on('keyup', bind(this.onKeyup, this));
this.$el.on('keydown', bind(this.listView.onKeydown, this.listView));
this.$el.on('mousedown', bind(this.listView.onKeydown, this.listView));
this.$el.on('keydown', bind(this.onKeydown, this));
this.$el.on('keydown', 'button', bind(this.onButtonKeydown, this));
this.$el.on(fireChangeOn, bind(this.onChange, this));

这是 JSFiddle 上的链接，您可以在其中查看完整代码。

http://jsfiddle.net/sahak_k/k455Lx3f/5/

Answer 1

这是解决鼠标点击问题的可能解决方法之一。 您可以手动绑定(bind)和处理OnMouseDown事件。 该代码可在 JSFiddle 中找到:

http://jsfiddle.net/k455Lx3f/7/

我在代码中添加了 isAngularJS 变量。当此变量设置为“true”时，将附加 onClickAngularJS 函数，否则 - 源 onClick 函数(第 602-613 行):

var ListView = (function() {
    function ListView($el, completer, isAngularJS) {
        this.$el = $el;
        this.index = 0;
        this.completer = completer;
        if (!isAngularJS) {
            this.$el.on('click', 'li.textcomplete-item', bind(this.onClick, this));
        } else {
            this.$el.on('mousedown', 'li.textcomplete-item > a', bind(this.onClickAngularJS, this));
        }
    }
...

此外，您还需要自己的点击处理函数(在 anchor 元素上)(第 721-730 行):

onClickAngularJS : function(e) {
    var $e = $(e.target);
    e.originalEvent.keepTextCompleteDropdown = true;
    if(!$e.hasClass('textcomplete-item')) {
        $e = $e.parents('li.textcomplete-item');
    }
    var selectedIndex = parseInt($e.data('index'));
    this.completer.onSelect(this.data[selectedIndex]);
    e.preventDefault();
}

...

最后，您需要在配置中指定“isAngularJS”参数(第 766-770 行):

...
var isAngularJS = false;
if (config.isAngularJS && config.isAngularJS === true) {
    isAngularJS = true;
}
new Completer(this, config.strategies, fireChangeOn, isAngularJS);
...