當離開textarea時點擊不點擊

我目前正在製作一個textarea來自動展開。這似乎工作正常，但按鈕單擊從未似乎觸發textarea擴展時。我也使用angularjs。這裏是我的代碼當離開textarea時點擊不點擊

HTML：

<body > 
    <div my-dir></div> 
</body>

的Javascript：

var app = angular.module('myApp',[]); 

app.directive('myDir', function(){ 
    return { 
     restrict:'A', 
     template:'<textarea id="textarea1">'+'</textarea>' + '<button ng-click="clicked()">Click me</button><textarea id="textarea2"></textarea>', 
     link:function(scope){ 
      scope.clicked = function(){ 
       alert("click worked"); 
      } 
     } 
    } 
});

如果有人能幫助我找到一個解決辦法或解釋到底爲什麼發生這種情況，將不勝感激。

鏈接到codepen：http://codepen.io/anon/pen/mJrjpP

來源

2015-05-22 BobDoleForPresident

@shaggy，點擊'textarea'，然後點擊''按鈕'，你不會得到'alert'。 – Zee

對不起，是的，只是發現了。 – Shaggy

這是因爲模糊的按鈕動作，因此點擊從未發生 – adeneo

當textarea的聚焦按鈕向下移動了一下，當你點擊按鈕的文字區域模糊事件觸發首先，移動按鈕彈起，因此點擊從未發生過因爲按鈕移到。

的解決方案是，以確保該按鈕原地踏步，使用CSS定位，或者按照下面

<button ng-mousedown="clicked()">Click me</button>

來源

2015-05-22 12:54:16 adeneo

或者只是使用NG-鼠標按下 – gyantasaurus

@gyantasaurus - ，將工作爲好，因爲它模糊之前觸發。問題在於mouseup在模糊之後觸發，並且在按鈕移動之後。 – adeneo

-1

app.directive('myDir', function(){ return{ restrict:'A', template:'<div ng-click="clicked()"><textarea id="textarea1">'+'</textarea>' + '<button >Click me</button><textarea id="textarea2"></textarea></div>', link:function(scope){ scope.clicked = function(){ alert("click worked"); } } } });

這被稱爲事件事件傳播或事件冒泡

例子：http://codepen.io/anon/pen/ZGpjZw

來源

2015-05-22 12:52:16

燁你願意，你可以解釋一下我 –

實際上什麼：殺敵我把你點我的壞 –

「*其實我不明白你想要什麼*」。如果你沒有完全理解一個問題，請在評論中要求澄清。 – Shaggy

在評論注意到gyantasaurus的問題是，當textarea失去焦點，它會調整和button會這樣移動，如果您通過單擊button刪除textarea的焦點，則由mousedown和mouseup事件組成的click事件將永遠不會觸發，因爲釋放鼠標時，光標不再處於按鈕。

您可以通過關注textarea，點擊button，將光標移動到按鈕的新位置，然後釋放鼠標按鈕來自己測試。

因此，一種解決方案是簡單地使用muosedown事件，而不是click事件。

來源

2015-05-22 12:55:41 Shaggy

一個可能的解決方案是在最後移動你的按鈕和應用position:fixed它。

template:'<textarea id="textarea1">'+'</textarea>' + '<textarea id="textarea2"></textarea><button class="btn" ng-click="clicked()">Click me</button>'

CSS：

.btn{ 
    position: fixed; 
}

但是，當然，這涉及到改變你的元素的位置。

來源

2015-05-22 13:00:02 Zee

當離開textarea時點擊不點擊

回答

相關問題