离开文本区域时按钮单击未触发
Posted
技术标签:
【中文标题】离开文本区域时按钮单击未触发【英文标题】：Button click not firing when leaving textarea 【发布时间】：2015-08-04 11:52:54 【问题描述】：我目前正在制作一个会自动扩展的文本区域。这似乎工作正常，但是当文本区域展开时，按钮单击似乎永远不会触发。我也在使用 angularjs。这是我的代码
html：
<body >
<div my-dir></div>
</body>
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
【问题讨论】：
@shaggy，点击textarea再点击button，你不会得到alert。
抱歉，是的，刚刚发现。
这是因为按钮移动模糊，所以点击永远不会发生
【参考方案1】：
当 textarea 获得焦点时，按钮会向下移动一点，当您单击按钮时，会首先触发 textareas blur 事件，将按钮向上移动，因此不会发生单击，因为按钮已移动。
解决方案是确保按钮保持不动，使用 CSS 定位，或者如下面 gyantasaurus 的评论中所述
<button ng-mousedown="clicked()">Click me</button>
【讨论】：
或者只使用 ng-mousedown @gyantasaurus - 这也可以，因为它会在模糊之前触发。问题在于，mouseup 在模糊后以及按钮移动后触发。【参考方案2】：问题在于，当textarea 失去焦点时，它会调整大小并且button 会移动，如果您通过单击button 将焦点从textarea 移除，click 事件由mousedown 和mouseup 事件组成，永远不会触发，因为当释放鼠标时，光标不再位于按钮上方。
您可以通过关注textarea，向下单击button，将光标移动到按钮的新位置，然后松开鼠标按钮来自行测试。
因此，一种解决方案是简单地使用muosedown 事件，而不是click 事件。
【讨论】：
【参考方案3】：一种可能的解决方案是在最后移动您的按钮并将position:fixed 应用到它。
template:'<textarea id="textarea1">'+'</textarea>' + '<textarea id="textarea2"></textarea><button class="btn" ng-click="clicked()">Click me</button>'
CSS：
.btn
position: fixed;
但这当然涉及更改元素的位置。
【讨论】：
【参考方案4】：
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
【讨论】：
是的，实际上你想要什么，你能解释一下吗 "其实我不明白你想要什么"。如果您不完全理解某个问题，请在 cmets 中要求澄清。以上是关于离开文本区域时按钮单击未触发的主要内容，如果未能解决你的问题，请参考以下文章
单击文本区域时，iOS 上的 reactstrap 模态关闭（仅在编辑时）