我知道如何在单击的指令上检测mousedown事件.但是,当鼠标在我的指令/元素之外时,我的指令也需要变得不可原谅或取消选择.我怎样才能做到这一点?

解决方法

在指令中创建一个链接函数,该函数绑定文档上的mousedown事件处理程序.然后,在指令元素本身上绑定另一个mousedown事件.后一个处理程序还应调用event.stopPropagation()以防止事件一直冒泡到文档级别:
link: function(scope,elem,attrs){
  angular.element(document).bind('mousedown',function(){
    console.log('clicked on document');
  });

  elem.bind('mousedown',function(e){
    e.stopPropagation();
    console.log('clicked on directive');
  });
}

Working Plunker

javascript – 检测Angularjs中的Mousedown事件的更多相关文章

  1. angularjs – 更新数组时如何避免刷新ng-repeat DOM列表

    因此,“trackby”实际上将检查传入对象的属性并替换旧对象并仍然保留id.这很激烈.值得注意的是,“trackby”也适用于除ng-repeat之外的其他指令,例如select.我做了一个小小的演示,对于那些可能会对一切如何运作感到困惑的人……

  2. angularjs – 解释ngModel管道,解析器,格式化程序,viewChangeListeners和$watchers的顺序

    换句话说:如果在模型更新之前触发了“ng-change”,我可以理解,但是我很难理解在更新模型之后以及在完成填充更改之前触发函数绑定属性.如果您读到这里:祝贺并感谢您的耐心等待!

  3. angularjs – 未知提供程序从Angular 1.0切换到1.2.3

    在AngularJS1.2.1中,路径模块已在单个文件angular-route.min.js中拉出,您需要根据发布的错误添加对此文件的引用和angular-sanitize.min.js.您还需要在应用程序中注入ngRoute和ngSanitize:

  4. angularjs – 在测试angular指令时,isolateScope()返回undefined

    使用Angularv1.2.25和rails资产管道,我试图测试指令的隔离范围确实已经更新.由于isolateScope()返回undefined我得到预期未定义的定义…

  5. AngularJS在自定义指令中包含ui-select

    我设法通过在模板中设置ng-model来进行绑定工作

  6. angularJs的国家选择控制

    p=preview使用ng-option指令使用ng-repeat指令:控制器中的国家范围:

  7. angularjs – 如何使用jasmine测试$timeout操作的持续时间?

    假设我在指令中有以下匿名功能:这成功了.现在,如果我想编写一个测试,使用jasmine,以确保在~2s后删除该类,将如何做?我应该补充一点,到目前为止我尝试过使用jasmine.Clock和waitsFor方法,在这两种情况下,测试都失败了.值得注意的是,当我在指令中将$timeout更改为setTimeout时,两个测试都已通过,因此angular的行为似乎在这里发挥作用..从1.2$timeout.flush()开始,需要一个延迟参数来模拟类似于jasmine.Clock模拟的时钟,但是以一种使Ang

  8. AngularJS – 在指令中加载动态模板HTML

    我有一个指令从外部HTML文件加载内容.传递给该指令的是一些范围数据,用于呈现该HTML片段.例如

  9. angularjs – 如何使用webpack编译角度模板?

    我们的想法是从所有html文件中获取1个JS文件.之后通过require使用它:你能分享一下你的体验吗?我正在谷歌搜索它,发现几个装载webpack但不知道该使用什么.我决定将web-pack的ng-cacheloader与ES2015语法一起使用:它意味着从而不是require导入.我的webpack配置的一部分:以及带模板的指令示例:

  10. angularjs google maps – 带窗口的标记 – infowindow不显示

    尝试使用angular-google-maps获取应用:–通过markers指令的多个标记–通过window指令的单个infowindow我已经通过API和git-hub网站上的多个已关闭的问题/问题,但是无法让它正常工作…我认为这是我将窗口html连接到控制器数组和函数的方式?任何帮助表示赞赏.附:api文档examples似乎已过时,因为它们不在示例中使用show,而是使用options.visible来显示和隐藏infowindows–但是所有issues/examples建议使用show代替?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部