如何通过点击文档触发函数

How to trigger a function from click on document

本文关键字：函数 文档 何通过      更新时间：2023-09-26

我的情况是：我有一个字段，一旦用户双击，它就会编辑该字段。这很好而且有效。我有两个函数：ok和cancel。取消将禁用编辑模式。ATM，用户必须点击取消才能禁用编辑模式。我想要的是，当用户单击页面上的其他位置时，允许禁用编辑模式。如何使用Angular实现这一点？

编辑：我正在添加我的标记（注：这是Jade）：

tr(ng-repeat="user in users | filter:searchText"s)
    td(ng-dblclick="editItem(user)", hm-double-tap="editItem(user)", ng-blur="cancelEditing()")
        span(ng-hide="user.editing") {{user.name}}
        form(ng-submit="doneEditing(user)", ng-show="user.editing", class="inline-editing-2", ng-blur="cancelEditing()")
            input(type="text", class="form-control", ng-model="user.name")
        button(class="btn btn-success mr-1", ng-show="user.editing", ng-click="doneEditing(user)")
            span(ng-click="doneEditing(user)").fa.fa-check-circle
        button(class="btn btn-warning mr-1", ng-show="user.editing", ng-click="cancelEditing(user)")
            span(ng-click="cancelEditing(user)").fa.fa-times-circle

正如您所看到的，我在用户身上有一个hg重复。当双击td元素时，会使user.editing为true，从而显示表单。CCD_ 5使变量为假并且仅显示字段。

我已经添加了ng-blur="cancelEditing()" on the tr , td , span and表单，但都不起作用。

你知道我错过了什么吗？

使用ng-blur将取消事件绑定到元素。当元素失去焦点时，它会开火。

IE:<input ng-blur="cancel()" />

注意：取消功能必须在范围内。

Angular ngBlur Docs

评论更新：

当双选项卡事件触发时，使输入元素聚焦，使字段可编辑。模糊事件可能不会触发，因为输入元素从未聚焦。

您可以从editItem函数内部或从指令内部执行此操作。

例如：

yourApp.directive('hmDoubleTap', function(){
    return function(scope, element, attr){
        if(doubleTap) {
            // Fire editItem(user)
            // You could add your .focus() inside editItem().
            // Or focus the first input element at the end of the directive.
            element.find("input")[0].focus();
        }
    };
});

b1j的答案只有在元素获得焦点时才有效。hm双击指令是否在双击后聚焦元素？否则，您将不得不在editItem函数中触发焦点。

另一种方法是处理任何其他元素上的点击事件，如

$('#field-no-edit').click(function() {
    $(this).hide();
    $('#field-edit').show().focus();
});
$('body').on('click', function(e){
    console.log($(e.target).attr('id'));
    if ($(e.target).attr('id') != 'field-no-edit') {
        console.log('not');
        $('#field-no-edit').text($('#field-edit').val());
        $('#field-edit').hide();
        $('#field-no-edit').show();
    }
});

JSFiddle

相关文章：