angularjs中的Jquery鼠标onclick答案

【问题标题】：Jquery mouse onclick inside angularjsangularjs中的Jquery鼠标onclick
【发布时间】：2015-08-06 08:23:32
【问题描述】：

我正在处理一个同时使用 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/

【问题讨论】：

你在用 chrome 测试吗？它是一个选择选项。然后就不行了。
是的，目前我正在 Chrome 上进行测试。但我也在 Mozilla Firefox（Windows 8.1、10 和 Linux 14.04）上对其进行了测试。这个选项是鼠标选择选项。我想了解为什么它不起作用。有什么文件可以解释吗？
据我所知，在 Angular 中使用 jQuery 的最佳实践是创建一个新指令并在其中包含您的 jquery 代码！
感谢您的评论。我也会尝试实施这种方法。

标签： javascript jquery angularjs eventhandler onmouseclick

【解决方案1】：

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

【讨论】：