3

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

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

谁能说出为什么 'onclick' 事件不会在 AngularJS 的范围内触发，但其他事件是？

附加了以下事件（JSFiddle JS 块中的第 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/

4

1 回答 1

0

这是解决鼠标单击问题的可能解决方法之一。您可以手动绑定和处理 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));
        }
    }
...

另外，您将需要自己的点击处理功能（在锚元素上）（第 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);
...
于 2015-08-14T09:06:31.763 回答