按钮太小时缺少点击事件

Question

我为 tinyMce 创建了一个 angular 指令，在设置时我添加了 2 个处理程序：用于隐藏工具栏的模糊事件和用于显示工具栏的点击事件。我还创建了另一个指令，其中有一个文本区域和一个按钮。单击按钮时，我希望工具栏消失并发生一些操作。

 <body ng-app="MyApp">
<div ng-controller="MyCntrl">
        <my-directive></my-directive>
</div>
<script>
    var app = angular.module("MyApp", []);
    app.controller("MyCntrl", function ($scope) {

    }).directive("myDirective", function ( $compile) {
        return {
            restrict: 'E',
            link: function (scope, elem) {
                scope.click = function () {
                    console.log("click");
                };
            },
            template: "<textarea data-tm ></textarea><button ng-click='click()' style='width:200px; height: 74px;' id='btn'>click</button>"

        }
    }).directive("tm", function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element) {
                $timeout(function() {
                    tinymce.init({
                        mode: 'textareas',
                        setup: function (ed) {
                            ed.on('blur', function (e) {
                                ed.theme.panel.find("toolbar").hide();
                                console.log("blur");
                            });
                            ed.on('click', function (e) {
                                ed.theme.panel.find("toolbar").show();
                            });
                        }
                    });
                });                   
            }
        }
    });
</script>

Link to the code

如果我在文本区域内单击，然后在按钮上单击，则会发生以下情况：当按钮的高度比较小时，比如20px，只有blur事件发生，但是当高度比较大比如120px时，blur和click事件都会发生。

你能告诉我这是为什么吗？我的猜测是，在第一种情况下，按钮被某些东西重叠，但我找不到什么。

谢谢

更新: 好像是tinyMCE的问题。我删除了 angular 并只创建了一个 tinyMce 编辑器和一个按钮。同样的问题：当按钮太小时不起作用，如果按钮足够大或放在编辑器上方时起作用。

<script type="text/javascript">
tinymce.init({
    mode: 'textareas',
    setup: function (ed) {
        ed.on('blur', function (e) {
            ed.theme.panel.find("toolbar").hide();
            console.log("blur");
        });
        ed.on('click', function (e) {
            ed.theme.panel.find("toolbar").show();
        });
    }
});

function myFunction() {
    console.log("click");
}

</script>
    <textarea></textarea>
    <button onclick="myFunction()" style="height:100px;">click</button>

Plunker

Answer 1

尝试设置一点超时，这样按钮将在点击事件期间保持在原位：

$timeout(function() { ed.theme.panel.find("toolbar").hide() }, 100);

看到这个plunker

Answer 2

当我们单击按钮时，工具栏会隐藏，按钮会向上移动，因此当鼠标松开时，它不会位于同一对象上。可以使用mousedown事件解决问题。

按钮太小时缺少点击事件

Click event is missing when a button is too small

css

tinymce