AngularJS实现长按不触发点击事件并复制到剪贴板的方法

AngularJS 长按不触发点击事件解决方案：实现文本复制与点击区分

近期在提交项目过程中遇到一个典型需求：测试人员需要能够直接复制页面上的文字内容，但又不希望触发绑定的点击事件。翻阅了大量资料后未找到直接可用的方案，于是自行设计了一个基于鼠标按下与抬起时间差来判断是否执行点击逻辑的解决方法。实现思路虽然简洁，但实际应用效果非常理想。

下面直接呈现核心代码。首先是 HTML 模板部分：

{{resource.content}}

此处 data-toggle="modal" 属于 Bootstrap 模态框的相关配置，与长按判断的核心逻辑并无直接关联。

整个方案的核心依赖于以下两个事件处理方法：

ng-mousedown="skipDown()"

ng-mouseup="skipUp($index)"

ng-mousedown 在鼠标按键被按下时执行，负责记录当前的时间戳；而 ng-mouseup 则在鼠标按键松开时触发，同步记录松开瞬间的时间戳。通过计算这两个时间点之间的差值，如果小于 500 毫秒则视为正常的点击操作并执行对应逻辑，反之则认定为长按操作，从而忽略点击事件。这样一来，用户在长按复制文本时就不会意外触发按钮的点击响应了。

// 鼠标按下时触发的方法，用于记录按下时刻的时间戳
$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);// 此处为具体的业务处理函数
    }
}

通过这种方式，用户可以无忧地进行文本复制与粘贴操作，完全不必担心复制过程中会误触发按钮的点击事件。该方案逻辑清晰、兼容性良好，非常适合需要明确区分长按与点击交互的前端开发场景。