Question

我为tinyMce创建了一个angular指令，在设置中我添加了2个处理程序：用于隐藏工具栏的模糊事件和用于显示它的click事件。我还创建了另一个指令，我有一个textarea和一个按钮。在按钮单击我想要一个工具栏消失，并发生一些动作。

 <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

如果我在textarea内部单击，然后在按钮上单击，则会发生以下情况：当按钮的高度相对较小时，例如20px，仅发生模糊事件，但是当高度相对较大时，让我们说120px，模糊和点击事件都会发生。

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

由于

更新：这似乎是tinyMCE的一个问题。我删除了角度，只创建了一个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事件可用于解决问题。

当按钮太小时，缺少点击事件

2 个答案: