改变布局的Javascript / jQuery focusout事件会导致点击事件不触发 [英] Javascript/jQuery focusout event that changes layout causes click event to not fire

问题描述

我有一个字段，当你专注于它，它会改变页面的布局。我还在页面上提供了我的表单按钮。

如果我进入我的字段并键入一个值，然后单击按钮，按钮单击事件永远不会触发。这似乎是因为在点击事件被触发之前布局正在改变，这意味着按钮改变了地方。点击事件触发时，它在空白区域触发，而不是按钮。

这是一个jsfiddle的问题： http://jsfiddle.net/xM88p/

我想出了一种解决方法这是IE，但经过广泛的研究，我找不到/访问相同的对象在FF / Chrome：

  //仅工作在IE 
 
 if（event.originalEvent.toElement）{
 $（＃+ event.originalEvent.toElement.id）.click（）; 
} 
  

解决方案

http://jsfiddle.net/xM88p/2/

使用 mousedown 而不是点击：

 code> $（＃btn_test）。on（'mousedown'，function（event）{
 alert（clicked！）; 
}）; 
 
 $（'＃test'）。focusout（function（event）{
 $（'< p> Test< / p>'）。insertAfter（this）; 
}）; 
  

修改

<好吧，我有更多的创意与事件处理程序。 新解决方案跟踪mousedown / mouseup事件以及点击的位置。它使用这些值来检查鼠标是否应该执行警报。

  var testClicked = false; 
 var lastX，lastY; 
 
 $（document）.on（'mouseup'，function（event）{
 if（testClicked === true&& lastX === event.clientX&&最后一个=== event.clientY）{
 alert（clicked！）; 
} 
 testClicked = false; 
 lastX = null; 
 lastY = null; 
}）; 
 
 $（＃btn_test）。on（'mousedown'，function（event）{
 testClicked = true; 
 lastX = event.clientX; 
 lastY = event.clientY; 
}）; 
 
 $（'＃test'）。focusout（function（event）{
 $（'< p> Test< / p>'）。insertAfter（this）; 
}）; 
  

I have a field that when you leave focus on it, it changes the layout of the page. I also have buttons on the page that submit my form.

If I go into my field and type a value, then click the button, the button click event never fires. This seems to happen because the layout is changing before the click event gets fired, which means the button changes places. By the time the click event fires, it's firing on an empty area, not the button.

Here is a jsfiddle of the issue: http://jsfiddle.net/xM88p/

I figured out a way to solve this for IE but after extensive research I can't find/access the same object in FF/Chrome:

//only works in IE

if(event.originalEvent.toElement){
  $("#"+event.originalEvent.toElement.id).click();
}

解决方案

http://jsfiddle.net/xM88p/2/

Use mousedown instead of click:

$("#btn_test").on('mousedown', function (event){
    alert("clicked!"); 
});

$('#test').focusout(function (event){
    $('<p>Test</p>').insertAfter(this);
});

Edit

Okay, I got a little more creative with the event handlers. The new solution keeps track of mousedown/mouseup events as well as the position of the click. It uses these values to check whether mouse up should execute an alert.

var testClicked = false;
var lastX, lastY;

$(document).on('mouseup', function (event) {
    if (testClicked === true && lastX === event.clientX && lastY === event.clientY) {
        alert("clicked!"); 
    }
    testClicked = false;
    lastX = null;
    lastY = null;
});

$("#btn_test").on('mousedown', function (event){
    testClicked = true;
    lastX = event.clientX;
    lastY = event.clientY;
});

$('#test').focusout(function (event){
    $('<p>Test</p>').insertAfter(this);
});

这篇关于改变布局的Javascript / jQuery focusout事件会导致点击事件不触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！