AngularJS/jQuery「parent（）」在FF中選擇的元素不同於Chrome和Safari，爲什麼？

我在AngularJS/Firefox中發現了一個奇怪的怪癖，那裏的選擇器使用了不同的元素。我已經把它在一個Plunker來證明它的效果：AngularJS/jQuery「parent（）」在FF中選擇的元素不同於Chrome和Safari，爲什麼？

http://plnkr.co/edit/H7stCpQE59i0aUlQ865j?p=preview

打開它在Chrome和點擊按鈕。你其實選擇一個隱藏<input>元素，那麼角度傳遞給它的活動/家長一起，抓住家長<button>並添加類.active它，像這樣：

$scope.selectTag = function($event){ 
     var elem = angular.element($event.srcElement).parent(); 
     if(elem.hasClass('active')){ 
      elem.removeClass("active"); 
     }else{ 
      elem.addClass('active'); 
     } 
    }

在Firefox中，雖然，它選擇<input>元素並將.active添加到該元素中，而不是作爲其父元素的<button>。

爲什麼會發生這種情況的任何想法？

來源

2013-12-13 Jascination

也許你應該使用'target'，而不是''一樣VAR ELEM = angular.element（$ event.target）.parent（）srcElement';' –

請訪問http：// stackoverflow.com/questions/5301643/how-can-i-make-event-srcelement-work-in-firefox-and-what-does-it-mean查看$ event.srcElement的描述 –

如在Arun P Johny的評論中所述，使用$event.target而不是srcElement。但是，在使用Angular JS時，你不應該像這樣操縱DOM。相反，你可以用ng-class來做到這一點。

<label class="btn btn-default" ng-class="foo"> 
    <input class="" ng-click="foo=(foo==='active') ? '' : 'active'" type="checkbox" /> 
    Button Text 
</label>

來源

2013-12-13 00:52:52 m59

我會將此標記爲正確因爲它是第一個/回答主要問題。隊友的歡呼聲！ – Jascination

@Jascination很好，謝謝！對於任何人看到這個，也看到charlietfl的答案！ – m59

不需要使用jQuery。只需使用ng-class。以下要求在控制器中使用零代碼來完成代碼最終要做的事情。此外，控制器不應該在其中包含任何DOM操作代碼

<label class="btn btn-default" ng-class="{active:btn_active}" > 
    <input class="" ng-click="btn_active=!btn_active" type="checkbox" /> 
    Button Text 
</label>

學習在使用jQuery方法之前首先查找角方法！

DEMO

來源

2013-12-13 00:57:11 charlietfl

Ah dangit。我認爲你更好。同樣的想法:) – m59

AngularJS/jQuery「parent（）」在FF中選擇的元素不同於Chrome和Safari，爲什麼？

回答

相關問題