另一個按鈕內的按鈕在Firefox中不起作用（Angular Material）

我的按鈕（class="patternButton"）包含另一個應該顯示菜單的小按鈕（class="patternMenuBtn"）。下面是標記：另一個按鈕內的按鈕在Firefox中不起作用（Angular Material）

<div class="patternsBlock"> 
     <md-button class="patternButton" 
        ng-class="{selected: view.id == selectedViewId, globalView: view.id.indexOf(userViewIdPrefix) == -1}" 
        ng-repeat="view in loadedViews" ng-click="selectPattern(view)"> 
      {{view.name}} 
      <md-menu md-offset="26 40" ng-show="view.id.indexOf(userViewIdPrefix) != -1"> 
       <md-button class="md-fab md-mini patternMenuBtn" ng-click="openMenu($mdOpenMenu, $event)"> 

       </md-button> 
       <md-menu-content width="2"> 
        <md-menu-item> 
         <md-button ng-click="deleteUserView(view, $index)"> 
          <span md-menu-align-target>Delete</span> 
         </md-button> 
        </md-menu-item> 
        <md-menu-item> 
         <md-button ng-click="openViewPanel(view, $index)"> 
          <span md-menu-align-target>Edit</span> 
         </md-button> 
        </md-menu-item> 
       </md-menu-content> 
      </md-menu> 
     </md-button> 
    </div>

這裏是openMenu處理程序：

$scope.openMenu = function ($mdOpenMenu, ev) { 
     ev.stopPropagation(); 
     $mdOpenMenu(ev); 
    };

這個工程在瀏覽器，但在Firefox不起作用。實際上，openMenu函數沒有被調用。

來源

2016-04-18 splash27

檢查控制檯中'ev'的值... – Rayon

@RayonDabre，我的應用永遠不會進入Firefox中的這個函數。所以'ev'不能被檢查。 – splash27

你可以分享演示或小提琴嗎？ – Rayon

看起來像唯一的解決方案是將按鈕放在一個旁邊而不是一個放入其他按鈕。我的新標記看起來像這樣：

<div class="patternsBlock"> 
     <div class="patternButtonContainer" ng-repeat="view in loadedViews" 
      ng-class="{selected: view.id == selectedViewId, globalView: view.id.indexOf(userViewIdPrefix) == -1}"> 
      <md-button class="patternButton" ng-click="selectPattern(view)"> 
       {{view.name}} 
      </md-button> 
      <md-menu md-offset="26 40" ng-show="view.id.indexOf(userViewIdPrefix) != -1"> 
       <md-button class="md-fab md-mini patternMenuBtn" ng-click="openMenu($mdOpenMenu, $event)"></md-button> 
       <md-menu-content width="2"> 
        <md-menu-item> 
         <md-button ng-click="deleteUserView(view, $index)"> 
          <span md-menu-align-target>Delete</span> 
         </md-button> 
        </md-menu-item> 
        <md-menu-item> 
         <md-button ng-click="openViewPanel(view, $index)"> 
          <span md-menu-align-target>Edit</span> 
         </md-button> 
        </md-menu-item> 
       </md-menu-content> 
      </md-menu> 
     </div> 
    </div>

然後，我使用CSS使菜單按鈕出現在主按鈕上。

重要設置position:relative在patternButtonContainer和position:absolute到<md-menu>。這種方式可以將菜單按鈕放到任何地方，而不會影響容器的大小。

來源

2016-04-19 06:46:54 splash27

我有同樣的問題： <md-button ng-disabled="true"> <md-button> </md-button> </md-button>

但我可以這樣解決： <div class="md-button" ng-disabled="true"> <md-button> </md-button> </div> 僅使用的CSS類MD-按鈕和正常工作。

來源

2016-04-29 09:09:58 silvelo

另一個按鈕內的按鈕在Firefox中不起作用（Angular Material）

回答

相關問題