`

onmousedown、onmouseup和onclick的奇怪问题

 
阅读更多

将setTimeout的时间设置为0,告诉浏览器当它为当前任何挂起的事件运行完事件句柄并且完成了文档当前状态的更新后,就调用该函数,于是可用下面的例子来看效果:

<script>

function createinput(){

         var input = document.createElement('input');
   
         input.setAttribute('type', 'text');
   
         input.setAttribute('value', 'test1');
   
         document.getElementById('inpwrapper').appendChild(input);
   
         input.focus();
   
         input.select();

    }

function createinput1(){

         var input = document.createElement('input');
   
         input.setAttribute('type', 'text');
   
         input.setAttribute('value', 'test1');
   
         document.getElementById('inpwrapper').appendChild(input);
   
     setTimeout(function(){

      input.focus();

      input.select();

     }, 0);

    }

</script>

<form name="navbar">

  <button id="makeinput" onmousedown="createinput()" create input</button>
  <p id="inpwrapper"></p>

</form>

 由于js执行是单线程的,当执行完鼠标按下的事件处理函数后会丢掉事件句柄链,所以用createinput函数不会使新创建的text聚焦,然而使用setTimeout方法后会告诉浏览器尽快执行它所指定的函数,所以用createinput1函数会使新创建的text聚焦。

 

问题1:但是当使用的是onmouseup="createinput()" 或者onclick="createinput()" 时,并不需要用setTimeout就可以让浏览器直接调用input.focus(); input.select();这又该如何解释呢??

问题2:当在onmousedown中调用createinput()前先调用alert()事件时,input.focus(); input.select();这两个方法会被浏览器调用,然而,如果该按钮同时注册了onmouseup或onclick的话是不会被触发的(在onmouseup和onclick中调用alert也一样,因为alert会阻止了事件传递,即后续调用事件丢失)

 

 

 

分享到:
评论

相关推荐

    javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

    在JavaScript中,`onmousedown`、`onmouseup` 和 `onclick` 是三个常见的鼠标事件,分别对应于鼠标按钮被按下、释放以及单击操作。在同一个元素上同时使用这三个事件可以实现更复杂的交互功能,但同时也可能带来一些...

    js函数中onmousedown和onclick的区别和联系探讨

    简单来说,`onclick`可以看作是`onmousedown`和`onmouseup`的组合。 在某些场景下,`onmousedown`和`onclick`的差异可能导致不同的行为。例如,如果你在某个元素上设置`onmousedown`事件,然后在不移动鼠标的情况下...

    解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

    为了解决这个问题,我们需要理解鼠标事件的执行顺序:onmousedown -&gt; onmouseup -&gt; onclick。这意味着,当用户拖拽结束后松开鼠标按钮(onmouseup),紧接着会触发click事件。由于click事件的执行时间非常短暂,所以...

    实例区别onClick和onDBClick两事件方法

    在上面的代码中,我们添加了四个事件处理函数:onmousedown、onmouseup、onclick和ondblclick。onmousedown和onmouseup事件用于捕获鼠标按下和释放事件,而onclick事件用于捕获单击事件,ondblclick事件用于捕获双击...

    第11章JAVASCRIPT事件和浏览器[参考].pdf

    10. **onmousedown、onmouseup及onclick事件**:鼠标按钮按下(`onmousedown`)、释放(`onmouseup`)和点击(`onclick`)事件,构成鼠标点击的完整过程,常用于实现按钮的点击功能或其他需要精确控制鼠标操作的场景。...

    BCB 窗体与控件应用基础

    - 对于鼠标事件,如OnMouseDown和OnMouseUp,Button参数标识是哪个鼠标按钮被按下或释放,Shift参数提供了鼠标的其他键状态,如左键、右键和中键。 在实际编程中,通过理解并利用这些事件,开发者可以构建出响应...

    HTML中setCapture、releaseCapture 使用方法浅析

    1. setCapture 简介 setCapture可以将鼠标事件锁定在指定的元素上,当... onclick ondblclick onmousedown onmouseup onmouseover onmouseout  setCapture不可作用于键盘等其它事件,只能作用于鼠标事件。主要

    WEB开发 之 JavaScript HTML DOM 事件.docx

    `onmousedown`在鼠标按钮按下时触发,`onmouseup`在释放鼠标按钮时触发,`onclick`则在完整的点击动作完成后触发。 7. **事件处理程序的兼容性**:需要注意的是,不同的浏览器可能对某些事件支持不同,因此在编写...

    onmouse常用事件js

    与`onmousedown`相对应,`onmouseup`事件在用户释放鼠标按钮时触发。它常与`onmousedown`结合使用,完成一个完整的点击操作。例如: ```html &lt;button onmousedown="console.log('按下')" onmouseup="console.log('...

    delphi7系统功能完善的计算器

    object Form1: TForm1 Left = 216 Top = 131 AutoSize = True BorderIcons = [biSystemMenu, biMinimize] BorderStyle = bsNone Caption = 'Calculator' ClientHeight = 304 ClientWidth = 226 ...

    关于js中的鼠标事件总结.docx

    在JavaScript中,有多种鼠标事件,包括`onclick`、`onmousedown`、`onmouseup`、`oncontextmenu`、`ondblclick`等。这些事件都伴随着一个事件对象`event`,在非IE低版本浏览器中,`event`对象是作为参数传递给事件...

    2021-2022计算机二级等级考试试题及答案No.18070.docx

    2. JavaScript 鼠标事件:JavaScript 中的鼠标事件包括onMouseDown、onMouseUp、onClick、onMouseMove、onMouseOver、onMouseOut等。题目中提到的B和D(onMouseLeave和onMouseOver)是两个常见的鼠标事件。 3. 面向...

    G:\Temp\KSDev.TrayClock.v1.04.rar

    + Handle all standard events - OnClick, OnMouseDown, OnMouseUp, OnMouseMove, OnMouseEnter, OnMouseLeave + Support standard hint + Handle custom hint window + Supports Windows95/98/Me/NT/2000/XP/2003

    delphi记录鼠标的轨迹

    主要有四种鼠标事件:OnMouseDown、OnMouseMove、OnMouseUp和OnClick。其中,OnMouseMove事件在鼠标移动时会被触发,是记录轨迹的关键。 1. **OnMouseMove事件**:在Form或任何具有焦点的控件上,当鼠标移动时,...

    delphi基础教程.doc

    此外,DBEdit 组件还具有多种事件,包括 OnChange、OnClick、OnDblClick、OnKeyDown、OnKeyUp、OnMouseDown、OnMouseUp 等,可以根据需要进行相应的处理。 在 Delphi 中,还提供了压缩流和解压流的应用,通过 ...

    《javascript》——event对象与事件

    * 鼠标事件:onclick、ondblclick、onmousedown、onmouseup、onmousemove、onmouseover、onmouseout * 键盘事件:onkeydown、onkeyup * 表单事件:onsubmit、onfocus、onblur、onchange * 页面事件:onload、...

    TnTrayIcon XE8

    系统托盘组件 TTrayIcon 简介 - 回复 ...OnClick: 单击图标时... OnDblClick OnMouseDown OnMouseMove OnMouseUp TTrayIcon 还有两个方法, 前面都已提到了: TTrayIcon.SetDefaultIcon; TTrayIcon.ShowBalloonHint;

    Delphi按钮控件TButton源代码(包括PNG图片按钮)

    这可以通过修改ButtonStyle属性或在OnMouseEnter、OnMouseLeave、OnMouseDown、OnMouseUp事件中改变图片来实现。 5. **尺寸调整**:确保按钮大小能适应PNG图片,可能需要重写SizeWidth和SizeHeight方法,以自动调整...

Global site tag (gtag.js) - Google Analytics