Question

这个问题真的让我大吃一惊。我有一个包含多个输入字段的页面（您可以将其称为表单）。某些字段触发ajax调用以在输入字段上执行serside表单验证。该页面有两个按钮。按钮将触发ajax调用以提交页面（而不是提交按钮）来处理数据。

现在的问题是，当关注带有提交的字段并单击按钮时，将忽略按钮上的单击。但不仅仅是按钮。我试图在主体上添加一个侦听器来处理点击，但即使点击也没有被记录。

我在互联网上发现浏览器在表单中的提交/发布时阻止点击操作的内容。所以我删除了表单标签。起初我认为它有效，但事实并非如此。

当我浏览页面时，我可以获得一个工作页面。我所看到的是，当第一个ajax调用还没有repsonse时，单击处理，因此可以单击该按钮，但是当ajax-call完成时，单击被忽略（在非常高的级别，浏览器不会甚至调度click事件）。

是否有人熟悉此浏览器行为？有人能告诉我如何避免这种情况吗？

编辑：

这有效：

没有节流专注于提交字段（提交模糊）按钮上的Mousedown（字段正在提交）一两秒后按钮上的鼠标按钮（单击按钮处理）

这不起作用：专注于提交字段（提交模糊）按钮上的Mousedown（字段正在提交）立即按下鼠标按钮，就像点击一样（单击（按钮）未处理）

繁殖：

<h3>Tasks</h3>

<form data-bind="submit: addTask">
    Add task: <input data-bind="value: newTaskText" placeholder="" />
    <button type="submit">Add</button>
</form>

<ul data-bind="foreach: tasks, visible: tasks().length > 0">
    <li>
        <input type="checkbox" data-bind="checked: isDone" />
        <input data-bind="value: title, disable: isDone" />
        <a href="#" data-bind="click: $parent.removeTask">Delete</a>
    </li> 
</ul>

You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>

<button data-bind="click: save">Save</button>


function Task(data) {
    this.title = ko.observable(data.title);
    this.isDone = ko.observable(data.isDone);
}

function TaskListViewModel() {
    // Data
    var self = this;
    self.tasks = ko.observableArray([]);
    self.newTaskText = ko.observable();
    self.incompleteTasks = ko.computed(function() {
        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });
    });

    self.newTaskText.subscribe(function(){
      console.log('submit');
        self.addTask();
    });

    // Operations
    self.addTask = function() {
        self.tasks.push(new Task({ title: this.newTaskText() }));
        self.newTaskText("");
    };
    self.removeTask = function(task) { self.tasks.destroy(task) };
    self.save = function() {
        $.ajax("/echo/json/", {
            data: {
                json: ko.toJSON({ tasks: self.tasks }),
                delay: 0
            },
            type: "post", contentType: "application/json",
            success: function(result) { console.log(); }
        });
    };


}

ko.applyBindings(new TaskListViewModel());

https://jsfiddle.net/fervanrijswijk/cr22jmxh/

编辑：似乎不是一个好的再生产路径

Ajax响应阻止点击事件

0 个答案: