betway必威-betway必威官方网站
做最好的网站

js不周详化解click和dblclick事件争持难点,onclick和

新浪首页的寻找框里面有一个用到ajax的下拉框。大家必要贯彻三个点击下拉框里面的一项,让寻找框里面包车型大巴值产生这一项,同有时候下拉框消失的职能,但同不经常候在点击任啥地点方的时候,那个下拉框也要未有。大约如图:

处境描述
  当有些成分,如:div,同期绑定了click事件和dblclick事件,而那三个事件又要管理绝对独立的业务,也正是click的时候不能触发dblclick,dblclick的时候无法触发click。在骨子里测量检验中窥见,当dblclick的时候,总会冒出1次click。下文就要化解的正是其一题目。
事态剖析
  首先大家要清楚click和dblclick的进行各种,测量检验进程略,下边是测验结果:
  click:mousedown -- mouseup -- click
  dblclick:mousedown -- mouseup -- click -- mousedown -- mouseup -- click -- dblclick
  因此看来,在dblclick触发在此以前,实际上是试行了2次click,而首先次的click是会屏蔽掉的(为何?好把,作者也不清楚)。
缓和方案
  起始想到的是不是足以告一段落事件,但意识浏览器并未提供相应措施,要是本身去落到实处难度太大,因为单击事件所关联的作为不可不做成是能够被cancel的才行。
  于是牵挂用延迟,也是本身唯一能体会理解的消除办法,利用setTimeout()来推延达成click事件的管理,然后在需求屏蔽click的时候用clear提姆eout()来终止。
切切实实代码

onclick和onblur抵触难题的非常快消除措施,onclickonblur争持

博客园首页的寻找框里面有二个利用ajax的下拉框。大家须求贯彻三个点击下拉框里面包车型大巴一项,让搜索框里面包车型客车值产生这一项,同一时候下拉框消失的成效,但与此同时在点击任哪个地方方的时候,这些下拉框也要付诸东流。差非常的少如图:

图片 1

我们还要利用onblur和onclick来使下拉框隐蔽,但是更加大的难题应运而生了,那四个效能相冲突,onblur过于强悍,根本未有onclick方法完结的空子,搜索框不能够赢得点击项的故事情节。这几个正是大家想要解决的onclick和onblur顶牛难点。

对应以此主题材料,这里我们介绍两种化解办法:
1. 施用setTimeout来使onblur时间推移试行,使onclick推行完后再执行onblur。(在那之中setTimeout的时刻设定应该在100ms以上,不然照旧十一分)示例代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{ margin: 0; padding: 0; list-style: none; }
    form{
      width:500px;
      margin:0 auto;
      position:relative;
      zoom:1;
    }
    form:after{
      clear:both;
      content:"";
      display:block;
    }
    .text{
      float:left;
      border:1px solid #cccccc;
      padding-left:14px;
      width:300px;
      height:34px;
      line-height:34px;
      font-size:14px;
    }
    .button{
      width:50px;
      height:34px;
      border:1px solid #cccccc;
      line-height:34px;
      font-size:14px;
      color:#ffffff;
      background:#ff8400;
    }
    ul{
      position:absolute;
      top:36px;
      left:0;
      width:300px;
      border-right:1px solid #cccccc;
      border-left:1px solid #cccccc;
      background:green;
      display:none;
    }
    li{
      font-size:14px;
      line-height:34px;
      height:34px;
      color:#000000;
      border-bottom:1px solid #cccccc;
    }
    li:hover{
      background:yellow;
      color:red;
      cursor:pointer;
    }
  </style>
  <script>
    window.onload=function(){
      var oText=document.getElementById('text');
      var oUl=document.getElementById('ul');
      var aLi=oUl.getElementsByTagName('li');
      var timer=null;
      oText.onfocus=function(){
        this.value='';
        oUl.style.display='block';
        for(var i=0;i<aLi.length;i  ){
          aLi[i].onclick=function(){
            clearTimeout(timer);
            oText.value=this.innerHTML;
            oUl.style.display='none';
          };
        }
      };
      oText.onblur=function(){
        timer=setTimeout(function(){
          oUl.style.display='none';
          if(!oText.value){
            oText.value='请输入关键字';
          }
        },120);
      };
    };
  </script>    
</head>
<body>
<form>
  <input type="text" value="请输入关键字" id="text" class="text"/>
  <input type="button" value="搜索" class="button"/>
  <ul id="ul">
    <li>返回窗口是否已被关闭</li>
    <li>返回窗口的文档显示区的高度</li>
    <li>返回窗口的文档显示区的宽度。</li>
    <li>设置或返回窗口的名称。</li>
    <li>返回窗口的外部高度。</li>
  </ul>
</form>

</body>
</html>

2. 运用document.onmousedown来代替onblur完结隐蔽下拉框成效

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    *{ margin: 0; padding: 0; list-style: none; }
    form{
      width:500px;
      margin:0 auto;
      position:relative;
      zoom:1;
    }
    form:after{
      clear:both;
      content:"";
      display:block;
    }
    .text{
      float:left;
      border:1px solid #cccccc;
      padding-left:14px;
      width:300px;
      height:34px;
      line-height:34px;
      font-size:14px;
    }
    .button{
      width:50px;
      height:34px;
      border:1px solid #cccccc;
      line-height:34px;
      font-size:14px;
      color:#ffffff;
      background:#ff8400;
    }
    ul{
      position:absolute;
      top:36px;
      left:0;
      width:300px;
      border-right:1px solid #cccccc;
      border-left:1px solid #cccccc;
      background:green;
      display:none;
    }
    li{
      font-size:14px;
      line-height:34px;
      height:34px;
      color:#000000;
      border-bottom:1px solid #cccccc;
    }
    li:hover{
      background:yellow;
      color:red;
      cursor:pointer;
    }
  </style>
  <script>
    window.onload=function(){
      var oText=document.getElementById('text');
      var oUl=document.getElementById('ul');
      var aLi=oUl.getElementsByTagName('li');
      var timer=null;
      oText.onfocus=function(){
        this.value='';
        oUl.style.display='block';
        for(var i=0;i<aLi.length;i  ){
          aLi[i].onclick=function(){
            clearTimeout(timer);
            oText.value=this.innerHTML;
            oUl.style.display='none';
          };
        }
      };

      document.onmousedown=function(ev){
        var oEvent=ev||event;
        var target=oEvent.target||oEvent.srcElement;
          if(target.parentNode!==oUl&&target!==oText){
            oUl.style.display='none';
          }

      };
      oText.onblur=function(){
        if(!oText.value){
          oText.value='请输入关键字';
        }  
      };
    };
  </script>    
</head>
<body>
<form>
  <input type="text" value="请输入关键字" id="text" class="text"/>
  <input type="button" value="搜索" class="button"/>
  <ul id="ul">
    <li>返回窗口是否已被关闭</li>
    <li>返回窗口的文档显示区的高度</li>
    <li>返回窗口的文档显示区的宽度。</li>
    <li>设置或返回窗口的名称。</li>
    <li>返回窗口的外部高度。</li>
  </ul>
</form>

</body>
</html>

上述那篇onclick和onblur冲突难题的长足解决方法正是我分享给我们的全体内容了,希望能给大家八个参照,也盼望大家多多协助帮客之家。

天涯论坛首页的寻找框里面有贰个使用ajax的下拉框。我们供给贯彻二个点击下拉框里面包车型大巴...

图片 2

复制代码 代码如下:

大家还要利用onblur和onclick来使下拉框隐敝,但是更大的主题材料应际而生了,那多少个效用相争辩,onblur过于强悍,根本未曾onclick方法完毕的空子,寻觅框不能够获取点击项的内容。这么些正是大家想要化解的onclick和onblur争辨难题。

var test = (function(){
var clickText = 'click<br>';
var dblclickText = 'dblclick<br>';
var timer = null;
return {
click: function(){
clearTimeout(timer);
timer = setTimeout(function(){
$('body').append(clickText);
}, 300);
},
dblclick: function(){
clearTimeout(timer);
$('body').append(dblclickText);
},
init: function(){
$(function(){
$('div').click(test.click).dblclick(test.dblclick);
});
}
}
})();
test.init();

本文由betway必威发布于网页设计,转载请注明出处:js不周详化解click和dblclick事件争持难点,onclick和

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。