Javascript 离开文本区域时，按钮单击不触发

我目前正在制作一个文本区域，它将自动扩展。这似乎工作得很好，但是当文本区域被扩展时，按钮点击似乎永远不会触发。我也在使用angularjs。这是我的密码

HTML:

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");
            }
        }
    }
});

var-app=angular.module（'myApp'，[]）；
app.directive（'myDir'，function（）{
返回{
限制：'A'，
模板：“”+“”+“单击我”，
链接：功能（范围）{
scope.clicked=function（）{
警报（“点击工作”）；
}
}
}
});

如果有人能帮我找到解决办法或解释为什么会发生这种情况，我将不胜感激

代码笔链接：

app.directive（'myDir'，function（）{
返回{
限制：'A'，
模板：“”+“”+“单击我”，
链接：功能（范围）{
scope.clicked=function（）{
警报（“点击工作”）；
}
}
}
});

这称为事件事件传播或事件冒泡

---

示例：

当文本区域聚焦时，按钮向下移动一点，当您单击按钮时，文本区域模糊事件首先触发，将按钮向上移动，因此，由于按钮移动，因此不会发生单击

解决方案是使用CSS定位，或如gyantasaurus在下面的评论中所述，确保按钮保持在原位

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

点击我

问题是，当

文本区域

失去焦点时，它会调整大小，并且

按钮

也会移动，如果您通过单击

按钮

从

文本区域

移除焦点，

单击

事件（由

鼠标向下

和

鼠标向下

事件组成）将永远不会触发，释放鼠标时，光标不再位于按钮上方

您可以通过将注意力集中在

文本区域

，单击

按钮

，将光标移动到按钮的新位置，然后释放鼠标按钮来测试这一点

---

因此，一种解决方案是简单地使用

muosedown

事件，而不是

click

事件。

一种可能的解决方案是将按钮移动到最后一个位置，并对其应用

位置：fixed

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

---

当然，这涉及到改变元素的位置。

@shaggy，点击

文本区域

，然后点击

按钮

，你将不会得到

警报。对不起，是的，刚刚发现了。这是因为按钮在模糊状态下移动，所以点击永远不会发生，或者只是使用ng-mousedown@gyantasaurus-那也行，当它在模糊之前开火时。问题是鼠标在模糊后启动，在按钮移动后。是的，你到底想要什么？你能解释一下“实际上我不明白你想要什么”。如果您不完全理解某个问题，请在评论中要求澄清。
<button ng-mousedown="clicked()">Click me</button>

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

.btn{
     position: fixed;
}