Question

我目前正在制作一个自动扩展的textarea。这似乎工作正常，但是当textarea扩展时按钮点击似乎永远不会触发。我也在使用angularjs。这是我的代码

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的链接：R source

Answer 1

当textarea聚焦时，按钮会向下移动一点，当您单击该按钮时，textareas blur事件将首先触发，向上移动按钮，因此按钮移动时不会发生单击。

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

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

Answer 2

问题在于，当textarea失去焦点时，它会调整大小并button移动，如果您已通过点击{textarea从button移除焦点{1}}，由click和mousedown事件组成的mouseup事件永远不会触发，因为当鼠标释放时，光标不再位于按钮上方。

您可以通过关注textarea，点击button，将光标移动到按钮的新位置，然后释放鼠标按钮来自行测试。

因此，一个解决方案就是使用muosedown事件，而不是click事件。

Answer 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;
}

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

Answer 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

离开textarea时按钮点击不点火

4 个答案: