相关疑难解决方法(0)

我发现queue()/ 上的jQuery.com文档dequeue()太简单了.jQuery中的队列究竟是什么？我应该如何使用它们？

看来Blur事件会阻止click事件处理程序工作吗？我有一个组合框,其中的选项仅在文本字段具有焦点时出现.选择选项链接应该导致事件发生.

我这里有一个小提琴的例子:http://jsfiddle.net/uXq5p/6/

重现:

1. 选择文本框
2. 链接出现
3. 单击链接
4. 模糊甚至发生,链接消失
5. 没有其他事情发生.

预期行为:

在步骤5,模糊发生后,点击甚至也应该开始.我该如何做到这一点？

更新:

在玩了一段时间之后,似乎有人已经竭尽全力防止已经发生的点击事件被处理,如果模糊事件使点击的元素不可点击.

例如:

$('#ShippingGroupListWrapper').css('left','-20px');

工作得很好,但是

$('#ShippingGroupListWrapper').css('left','-2000px');

阻止点击事件.

这似乎是在Firefox中的错误,因为让一个元素未点击应防止未来的点击,但没有取消的时候可以点击它已经发生的.

阻止click事件处理的其他因素:

$('#ShippingGroupListWrapper').css('z-index','-20');
$('#ShippingGroupListWrapper').css('display','none');
$('#ShippingGroupListWrapper').css('visibility','hidden');
$('#ShippingGroupListWrapper').css('opacity','.5');

我在这个网站上发现了一些有类似问题的问题.似乎有两种解决方案:

1. 使用延迟.这很糟糕,因为它在隐藏和click事件处理程序之间创建了竞争条件.它也很草率.

2. 使用该mousedown活动.但这不是一个很好的解决方案,因为它click 是链接的正确事件.mousedown从UX的角度来看,这种行为是违反直觉的,特别是因为在释放按钮之前无法通过将鼠标移离元素来取消单击.

我还能想到更多.

3.使用mouseover和mouseout在链接上启用/禁用字段的模糊事件.这不适用于键盘标签,因为不涉及鼠标.

4.最好的解决方案是:

$('#ShippingGroup').blur(function()
{
   if($(document.activeElement) == $('.ShippingGroupLinkList'))
      return; // The element that now has focus is a link, do nothing
   $('#ShippingGroupListWrapper').css('display','none'); // hide it.
}

不幸的是,$(document.activeElement)似乎总是返回body元素,而不是单击的元素.但也许有一种可靠的方法可以知道1.哪个元素现在具有焦点或两个,哪个元素导致模糊处理程序内的模糊(不是哪个元素模糊).此外,还有其他事件(除此之外mousedown)在模糊之前触发吗？

我有一个<input type="text">字段,当这个字段失去焦点时我需要清除它(这意味着用户点击了页面上的某个地方).但有一个例外.当用户单击特定元素时,不应清除输入文本字段.

我试图用来event.relatedTarget检测用户是否点击了某个地方而不是我的具体点击<div>.

但是正如您在下面的代码段中看到的那样,它根本不起作用.event.relatedTarget总是回来null!

function lose_focus(event) {
  if(event.relatedTarget === null) {
    document.getElementById('text-field').value = '';
  }
}

.special {
  width: 200px;
  height: 100px;
  background: #ccc;
  border: 1px solid #000;
  margin: 25px 0;
  padding: 15px;
}
.special:hover {
  cursor: pointer;
}

<input id="text-field" type="text" onblur="lose_focus(event)" placeholder="Type something...">

<div class="special">Clicking here should not cause clearing!</div>

我有以下jQuery和HTML,当输入的焦点丢失时隐藏搜索结果.

#searchResult当#searchResult点击元素时,此代码用id隐藏我的div .我想在单击div上的元素时禁用模糊#searchResult.基本上,我想<div id="searchResult">在焦点丢失时隐藏并显示焦点何时聚焦.我怎样才能做到这一点？

$(document).on("blur", "#txtSearchTerm", function () {
    $('#searchResult').hide();
});

$(document).on("focus", "#txtSearchTerm", function () {
    $('#searchResult').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="txtSearchTerm" type="text">

<div id="searchResult">
    <ul>
        <li>
            <a href="http://www.google.com">
                <div class="title">Google.com</div>
                <div class="content">Click here</div>
            </a>
        </li>
        <li>
            <a href="http://www.google.com">
               <div class="title">Google.com</div>
               <div class="content">Click here</div>
           </a>
        </li>
    </ul>
</div>

<div id="searchResult"> 将在每次点击其中的元素时隐藏.

我已经使用ng-click了div,它按预期工作,但是当我使用ng-blur其他一些输入时,ng-clickdiv上的工作停止了.

工作代码[点击时调用addItem(item)]

 <div ng-controller="TestController">
  <input type="text" ng-focus="show=true">
  <div ng-show="show" class="choosecont">
    Choose from selected
    <div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
  </div>
  <div class="chosencont">
    Following are selected
    <div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
  </div>
</div>

破解的代码[addItem(item)未被调用]

 <div ng-controller="TestController">
  <input type="text" ng-focus="show=true" ng-blur="show=false">
  <div ng-show="show" class="choosecont">
    Choose from selected
    <div ng-repeat="item in allItems" ng-click="addItem(item)" class="choose">{{item}}</div>
  </div>
  <div class="chosencont">
    Following are selected
    <div ng-repeat="item in selectedItems" class="chosen">{{item}}</div>
  </div>
</div>

相关的JS代码

angular.module("myApp", [])
.controller("TestController", ["$scope", function($scope) {
  $scope.allItems = ["A", …

我有一个div我想要显示/隐藏的焦点/模糊input.这是我正在尝试的简化版本:

<input (focus)="ShowDropDown=true;" (blur)="ShowDropDown=false;" />
<div *ngIf="ShowDropDown">
  <ul>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
    <li (click)="...">...</li>
  </ul>
</div>

这div包含要单击的元素列表.我的问题是input在li点击之前发生了模糊.

我想保持简单.我不想设置所有的焦点或点击事件来设置,ShowDropDown=false但我需要保持下拉div打开以进行交互.

我可以ShowDropDown成为一个数字,其中聚焦增加1,鼠标在div上添加另外1,模糊输入减去1,鼠标除去减去1但我想这可能很容易失去同步.

有更简单的方法吗？点击后我可以强制模糊运行吗？

我在页面上有输入字段和提交按钮.

<form id="searchform">
<input id="s" type="search" autocomplete="off" name="s" value="">
<div id="search-submit" class="input-group-addon">
    <i>SUBMIT</i>
</div>
</form>

这里是jQuery代码:

var inProgress = false; 

$("#search-submit").on("click", function() {
    inProgress = true;
    alert ("Form Submit");
    inProgress = false;   
});

$("#s").blur(function () {
    if ( ! inProgress ) {
        alert ("Blur");
    inProgress = false; 
    }
});

如果从输入字段点击提交div,我想防止模糊,但是如果从输入字段点击到页面的其他部分,我想允许它.我无法使用按钮提交.

我把小提琴jsfiddle.net/405kzboh/1

但是现在我甚至不理解为什么在Blur事件之前没有触发Click事件,如果有人点击输入提交!

我有一个表单,其中包含错误消息,如下例所示:

http://codepen.io/anon/pen/dYWyEM?editors=101

重现问题的步骤如下:

打开codepen链接后,

1)关注输入字段

2)按提交按钮

3)由于首先触发模糊事件,因此首先隐藏错误消息,从而改变提交按钮的位置.因此,点击事件根本没有注册,我需要再次点击提交表格.

有没有办法先发送提交事件？

不知何故,我需要检测触发模糊事件的目标.这似乎relatedTarget使我们能够找出触发模糊事件的元素.但是,这在Firefox中不起作用.

有没有办法在所有浏览器中找出relatedTarget？