脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularJS 长按复制剪贴

angularJS 实现长按不触发点击事件可以复制剪贴方法

 更新时间：2023年06月30日 10:33:50   作者：Skywang  
这篇文章主要为大家介绍了angularJS实现长按不触发点击事件可以复制剪贴方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

解决demo分析

这两天提交项目遇到一个需求，就是测试需要复制文字内容 但是不触发点击事件， 在网上没有找到类似的方法， 就自己想到一个方法 ，通过点下鼠标和抬起鼠标的时间差来判断是否触发点击事件。

废话不多说 直接上代码 首先是html界面

<span ng-mousedown="skipDown()" ng-mouseup="skipUp($index)"  style="cursor: pointer;" data-toggle="modal" ><a>{{resource.content}}</a></span>

这里data-toggle="modal"是Bootstrap的模态框类名

主要是这两个方法

ng-mousedown="skipDown()"

ng-mouseup="skipUp($index)"

ng-mousedown是按下按钮时触发的方法

ng-mouseup是松开按钮时触发的方法

// 按下按钮触发的方法 获取按下按钮的时间
$scope.skipDown = function() {
    $scope.skipDownTime = Date.parse(new Date());
}
// 松开按钮的触发方法 获取松开按钮的时间
$scope.skipUp = function(index) {
    $scope.skipUpTime = Date.parse(new Date());
  // 这里判断松开按钮和点下按钮直接的时间差 是否小于0.5秒
      小于0.5秒则触发skipInfor的方法
    if($scope.skipUpTime - $scope.skipDownTime < 500) {
       $scope.skipInfor(index);// 这里是具体方法
    }
}

这样你就可以进行复制粘贴了，不用担心复制的时候会触发按钮方法

以上就是angularJS 实现长按不触发点击事件复制剪贴的详细内容，更多关于angularJS 长按复制剪贴的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • NodeJs——入门必看攻略

    NodeJs——入门必看攻略

    下面小编就为大家带来一篇NodeJs——入门必看攻略。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 详谈Angular路由与Nodejs路由的区别

    详谈Angular路由与Nodejs路由的区别

    下面小编就为大家带来一篇详谈Angular路由与Nodejs路由的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 详解JavaScript的AngularJS框架中的作用域与数据绑定

    详解JavaScript的AngularJS框架中的作用域与数据绑定

    这篇文章主要介绍了JavaScript的AngularJS框架中的作用域与数据绑定,包括作用域的继承以及数据的单向和双向绑定等重要知识点,需要的朋友可以参考下
    2016-03-03
  • AngularJS指令用法详解

    AngularJS指令用法详解

    这篇文章主要介绍了AngularJS指令用法,较为详细的分析了AngularJS指令的功能、用法及自定义指令的相关实现技巧,需要的朋友可以参考下
    2016-11-11
  • 使用ngView配合AngularJS应用实现动画效果的方法

    使用ngView配合AngularJS应用实现动画效果的方法

    这篇文章主要介绍了使用ngView配合AngularJS应用实现动画效果的方法,AngularJS是十分热门的JavaScript库,需要的朋友可以参考下
    2015-06-06
  • 对比分析AngularJS中的$http.post与jQuery.post的区别

    对比分析AngularJS中的$http.post与jQuery.post的区别

    这篇文章主要给大家对比分析AngularJS中的$http.post与jQuery.post的区别，十分的详细，是篇非常不错的文章，这里推荐给小伙伴们。
    2015-02-02
  • AngularJS基础 ng-keypress 指令简单示例

    AngularJS基础 ng-keypress 指令简单示例

    本文主要介绍AngularJS ng-keypress 指令,这里帮大家整理了基础资料,并附是示例代码,有需要的小伙伴可以参考下
    2016-08-08
  • 详解Angular之路由基础

    详解Angular之路由基础

    单页应用中，组件时构建应用的基础元素，页面展示什么内容均是靠页面有什么组件决定的，而展示什么组件又是由一组路由（带有Url元素的特定集合，可用于导航视图）决定的，希望本文可以帮助读者了解路由的基础概念和基础使用、写法。
    2021-05-05
  • 详解Angular2 关于*ngFor 嵌套循环

    详解Angular2 关于*ngFor 嵌套循环

    这篇文章主要介绍了详解Angular2 关于*ngFor 嵌套循环，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • Angular 4.0学习教程之架构详解

    Angular 4.0学习教程之架构详解

    作为一种大受欢迎的Web应用程序框架,Angular终于迎来了版本4.0，下面这篇文章主要给大家介绍了关于Angular 4.0学习教程之架构的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09

最新评论