點擊禁用ng-mouseover

我有一個包含10個元素左側浮動的表格列表，當您將鼠標懸停在任何行上時，它會在頁面右側的div中更詳細地顯示該對象。點擊禁用ng-mouseover

我想擁有它，因此您還可以單擊其中一行，它將重點放在該行上，將其顯示在右側，並禁用其他行上的懸停，直到您單擊/執行某些操作等。

我看了一下ng-mouseover on disabled button in Angularjs，但這個問題的答案使用CSS - 不知道如何將此主題融入我的代碼（完全重組是一個選項:(！）

HTML

</div> 
    <div class="row" ng-show="resultsExist"> 
     <div class="col-lg-6 col-md-6"> 
      <table class="table"> 
       <tr ng-repeat="doc in docs" ng-init="index = $index + 1" ng-mouseenter="hoverFocus(doc)" ng-click="clickFocus(doc)"> 
        <td>{{index}}</td> 
        <td>{{doc.headline.main}}</td> 
       </tr> 
      </table> 
     </div> 
     <div class="col-lg-6 col-md-6"> 
      <div ng-show="showInfo"> 
       <p>Publication Date: {{infoDoc.pub_date}}</p> 
       <h2>{{infoDoc.headline.main}}</h1> 
       <h3>{{infoDoc.lead_paragraph}}</h3> 
       <p> Source: {{infoDoc.source}}</p> 
       <button target="_blank" href="{{infoDoc.webUrl}}"> See full link here</button> 
      </div> 
     </div> 
    </div>

個JS

$scope.hoverFocus = function(doc) { 
     $scope.showInfo = true; 
     $scope.infoDoc = doc; 
    } 
$scope.clickFocus = function() { 
    // Not sure 
}

任何幫助，將不勝感激，不知道如何繼續這個！

編輯：帶我了一陣子，但這裏是一個小提琴顯示更基本的概述。 http://jsfiddle.net/v7hx8nho/3/在懸停顯示該項目的標題時，點擊顯示該項目，直到您點擊關閉爲止。

來源

2016-06-21 Olly

你可以把它放進小提琴或stackoverflow snippet，所以我可以看到實際發生了什麼..謝謝 – MrBuggy

花了一段時間，因爲第一次使用小提琴，添加到問題 – Olly

好吧，等待一分鐘，我可能有一個想法... – MrBuggy

一些建議，

您可以使用CSS來禁用其他元素的鼠標事件， https://developer.mozilla.org/en/docs/Web/CSS/pointer-events 所以在當你想禁用懸停添加這種風格的時候，用NG-課堂或其他事情。
在您的NG-mousever事件處理函數，如果條件創建，並檢查是否顯示的信息或沒有，例如，

$scope.hoverFocus = function(doc) { 
 
     if ($scope.on == false) return; 
 

 
     $scope.showInfo = true; 
 
     $scope.infoDoc = doc; 
 
    }

來源

2016-06-21 11:53:10

結束了你的第二個選擇，不能相信我錯過了這麼簡單的事情。工作得很好，謝謝！ – Olly

你去那裏： http://jsfiddle.net/v7hx8nho/11/enter code here

你可以設置一個布爾值，如果它被點擊或不在hoverFunction中檢查它......確實如此，標題在那裏，沒有懸停，點擊第二次後，它是假的，懸停打開...乾杯

來源

2016-06-21 12:05:35 MrBuggy

最終實現了一個幾乎相同的解決方案！無論如何謝謝 – Olly

@Olyly好吧，如果我的帖子對這個問題也很有用，這將是很好的，如果你投票 - 謝謝和歡呼。 – MrBuggy

點擊禁用ng-mouseover

回答

相關問題