AngularJS指令與mousedown事件處理程序但點擊事件永遠不會觸發

我已經創建了一個自定義指令，用於連接mousedown/touchstart和mouseup/touchend事件，以向元素添加/移除css3變換（按/釋放效果）。AngularJS指令與mousedown事件處理程序但點擊事件永遠不會觸發

它適用於臺式機Chrome和IE，iOS7和iOS6，但是Android4.4.2可以顯示轉換效果，但點擊事件永遠不會觸發實際導航。

我可以讓它工作的唯一方法是點擊/點擊非常非常快的元素。就好像點擊事件在使用正常敲擊速度時被吞噬或取消一樣。

我使用ng-click指令將指令應用於div和div中 - 既沒有效果。

編輯：有一種情況，它不能在任何瀏覽器中工作 - 如果我添加指令的div也有ng-click附加。如果我通過添加一個嵌套的div在DOM中添加一級，並將其應用於該div，它可以正常工作。

下面是一個例子的div移動到Android或觸摸設備時包裹在一個鏈路

<a ng-href="#/concept/{{conceptOfDay.id}}"> 
    <div class="contentBox" touch-tilt> 
     <i class="fa fa-2x icon fa-calendar-o"></i> 
     <div class="itemTitle">concept of the day</div> 
     <div class="itemSubTitle">{{conceptOfDay.title}}</div> 
    </div> 
</a>

而指令

angular.module('app').directive('touchTilt', ['$document', function ($document) { 

    var directive = { 
     restrict: 'A', 
     link: function (scope, element, attr) { 

      function mousedown(event) { 
       var translateString = "perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(-30px)"; 
       element.css('transform', translateString); 
       $document.on('touchend mouseup', mouseup); 
      } 

      function mouseup(event) { 
       var idleCss = "perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0px)"; 
       element.css('transform', idleCss); 
       $document.off('touchend mouseup', mouseup); 
      } 

      element.on('touchstart mousedown', mousedown); 
      element.click(function() { alert('click event handled'); }) 
     } 
    }; 
    return directive; 
}]);

來源

2014-06-24 MIantosca

如果明天沒有解決這個問題，我會來看看。有一件事不好說，我發現ngTouch會導致更多的問題，然後解決它，除非您發送時間來解決它自己的怪癖。 – Jegsar

通常使用ngTouch模塊。目前在觸摸設備上的延遲，通過這個文件指出：

https://docs.angularjs.org/api/ngTouch

有些元素是從你的榜樣缺失，或者你只是做不同的話，我做的，所以我不會在特別評論（我傾向於明確使用ngClick）。

無論如何，你應該能夠在ngTouch中使用ngClick指令來讓觸摸屏更好地工作。我有一個類似的問題，包括角度觸摸解決了不少。

你沒有注意到你包括什麼庫，所以如果我是多餘的，那就是爲什麼。

來源

2014-07-04 18:53:14

在鏈接函數中，你只是聲明瞭兩個處理函數mousedown和mouseup，但你從來沒有設置它們被解僱。您需要在標記中添加ng-click或將該元素綁定到鏈接函數中的事件偵聽器。

// (Inside of link function) 
element.bind('mousedown', function(){ 
    console.log('clicked on document'); 
    });

來源

2016-05-12 14:55:48 Jim

AngularJS指令與mousedown事件處理程序但點擊事件永遠不會觸發

回答

相關問題