前言 关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。...draggable('#modal', '#modal .modal-header'); 我们可以通过第二个参数指定不同的拖拽元素，比如可以指定整个 modal 为拖拽元素 draggable('#...排除特定元素的方法 关于如何排除特定元素的方法，很多人会推荐阻止冒泡的方法，但是我试了很多次，这种方法是不行的，因为拖拽事件绑定在了 document 对象上。...因为我们在排除特定元素的同时也要排除它的子元素。如果使用原生 JS 的话，需要添加获取子元素的方法。...JS 修改如下： draggable('#modal','#modal .modal-header', '#modal .btn-close'); ?
此节点应用于document的节点上（但不能在document上绑定此事件），可以绑定元素：body、img、frame、frameset、iframe、link、script。...js对象：image、windows、layer（h5的） unload 在页面或内容被移除时触发。元素：body、frameset；Js对象：window。...；js对象：window，image select 文本被选中触发，js对象：window 2.1 兼容点 当load事件应用在script元素上时，在Ie不支持，需要用onreadystatechange...事件来代替（error会作为一个状态来传递）; script的error，在ie上也是不支持的，也是通过onreadystatechange事件来代替（状态值）。...4.1 区别与兼容性 oninput为现代浏览器的特性(ie9+都ok)，只有改变控件的value才会触发oninput，但js改变value不会触发oninput，并且oninput需要只能通过addEventListener
无法删除通过匿名定义添加的执行函数。 封装跨浏览器的事件处理函数 因为 IE 独树一帜，又因为 IE 属于 windows 用户标配；所以兼容需要考虑。...添加事件的方法？建议使用之前写的跨浏览器事件处理方法。当然也可以通过获取 dom 对象，并对其属性赋值，也可以直接在 html 元素上绑定。...焦点一般只鼠标的焦点，虽然可以检测鼠标事件来监控，但是焦点可以通过键盘移动所以有专门的事件监控。...焦点事件标准不一，但是 DOM3 统一了一个标准并且规定了它的发生顺序 当一个元素移动到另一个元素会依次触发以下事件;一般 blur 与 focus 常见 focusout 在失去焦点元素上触发...，会冒泡 focusin 在获取焦点元素上触发，会冒泡 blur 在失去元素上触发，不会冒泡 DOMFocusOut 在失去焦点元素上触发，会冒泡; Opera 专有 focus 在获取焦点元素上触发，
事件 说明 blur 在元素失去焦点时触发，不会冒泡 focus 在元素获得焦点时触发，不会冒泡 focusin 在元素获得焦点时触发，会冒泡 focusout 在元素失去焦点时触发，会冒泡 当焦点从页面中的一个元素移动到另一个元素...，会依次触发下列事件： （1）focusout在失去焦点的元素上触发； （2）focusin在获得焦点的元素上触发； （3）blur在失去焦点的元素上触发； （4）DOMFocusOut...在失去焦点的元素上触发； （5）focus在获得焦点的元素上触发； （6）DOMFocusIn在获得焦点的元素上触发。...其中：blur、DOMFoucsOut和focusout的事件目标对象是失去焦点的元素；而focus、DOMFocusIn和focusIn的事件目标是获得焦点的元素。...也可以通过event.relatedTarget来获取对应相关元素（哪个元素失去焦点导致目标元素获得焦点，哪个元素获得焦点导致目标元素失去焦点）。
设置元素获得焦点时的样式 :focus用于设置元素处于focus状态下的样式。 兼容性：IE8开始支持。 那么哪些元素支持focus状态呢？那要先弄清楚通过哪些操作可能实现focus。...那么传统上支持focus状态的元素必定是a、button、input、select和textareas....a,button,input,select,textarea,[contenteditable],[tabindex] 注意：若tabindex属性值小于0，则无法通过Tab键获得焦点。...但可以通过鼠标点击 或 脚本时元素获得焦点。...JS获取当前得到焦点的元素 /* * 加载完成时默认返回body * 若某元素获得焦点时，则返回该元素 */ document.activeElement :: HTMLElement 另外还有一个让人误会的属性
这种方法的缺点是，现在我们必须对所有按钮进行样式设置，否则用户将无法识别它们。...它在整个页面上运行，并且仅在使用键盘时才将焦点可见的类设置为接收焦点的元素。...focus-visible.js脚本后，它会为元素添加一个js-focus-visible类。...我们可以使用它来从没有焦点可见类的焦点元素中移除焦点样式： /* hide focus style if not from keyboard navigation */ .js-focus-visible...不是活动的（例如，如果我们的JS未能加载），则会中断焦点样式。
focus与blur事件不会冒泡。 ---- 什么元素能够focus 默认情况并不是所有元素都能获得焦点。需要满足以下条件之一： 可交互的元素（如 input,select,a）。...换言之，默认情况下，用于布局的元素（如div, span, table）则不能获得焦点 含有tabindex属性的元素 当我们想令非可交互元素获得焦点，可以为其设置tabindex属性。...Tab切换到该元素，但是可以通过elem.focus()使该元素获得焦点 当多个元素tabindex相同，以元素在HTML代码中出现的顺序为准 例子 1焦点的元素依次为1 - 2 - 0。...focusin/focusout focus与blur事件不会冒泡。如果想实现事件代理可以通过允许捕获实现。
首先来了解一下事件冒泡和捕获 事件冒泡：内部事件先触发，然后在触发外部事件 事件捕获：外部事件先被触发，然后在触发内部元素 mouseover（）/mouseout()...：鼠标移入“所选元素以及后代都会触发” mouseenter（）/mouseleave()：鼠标移入“所选元素”才会触发，如果鼠标移入所选元素的后代时，不会触发（增加阻止事件冒泡功能） 焦点事件 2 blur()： 失去焦点事件 3 focusin() ：获得焦点事件 4 focusout() :失去焦点事件 5 change() ...:元素发生改变时，触发事件 6 select（）:当选中单行文本text或者多行文本areatext时，触发事件 7 submit() :表单提交事件 //focus()和focusin...() 的区别 focusin可以在父元素上检测子元素获得焦点的情况 而focusout可以在父元素上检测子元素失去焦点情况 四 其他事件 1 scroll（）滚动滚动条时触发的事件
function() { alert("鼠标按下去了"); }); $("#test").mouseup(function() { alert("鼠标弹起来了"); }); 当鼠标在“点击触发”上按下去的时候...focusout()相反，就是失去焦点，用法和focusin()类似。 二、表单事件： 1、blur()和focus(): 这两个就是处理表单焦点的事件，blur()是失去焦点，focus是聚焦。...2、change()事件： 元素，和元素的值都是可以发生改变的，我们就可以通过change事件去监听这些改变的动作。...；keypress事件只能捕获单个字符，不能捕获组合键，无法响应系统功能键（如delete，backspace），不区分小键盘和主键盘的数字字符。...3、$.getScript(): 用法和$.getJSON()基本一样，区别在于url不是返回json格式数据的url，而是指向一个js文件，比如statis/js/sport.js，还有就是没有data
如果事件不传播，我们无法确定我们点击的对象是什么？ 2、事件流三种模型 2.1事件冒泡模型 事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。...3.4 removeEventListener解绑事件 通过addEventListener添加的事件处理程序只能通过removeEventListener移除，移除时参数与添加的时候相同 添加的匿名函数无法移除...在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息。...1、事件代理的原理： 利用事件模型的传播性质，将子元素的监听函数绑定到父元素上，通过事件传播去执行监听函数。...六、常见的事件类型 常见事件类型 解析 click 单击 dblclick 双击 focus 焦点，比如表单input把光标放上去开始输入的时刻 blur 失去焦点，比如输入完成切换到下一个输入框时，就失去了焦点
可以通过使用 "for" 属性将 label 绑定到另一个元素，或者直接在 label 元素内部放置元素。 属性 值 描述 for id 规定 label 绑定到哪个表单元素。...：可以选择当前输入焦点的元素，例如把光标放到一个上，用$('input:focus')就可以选出； :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，...键盘事件 键盘事件仅作用在当前焦点的DOM上，通常是和。 keydown：键盘按下时触发； keyup：键盘松开时触发； keypress：按一次键后触发。...其他事件 focus：当DOM获得焦点时触发； blur：当DOM失去焦点时触发； change：当、或的内容改变时触发； submit：当...这种传播分成三个阶段： 第一阶段：从window对象传导到目标节点，称为“捕获阶段”（capture phase）。 第二阶段：在目标节点上触发，称为“目标阶段”（target phase）。
分类：知识点，JavaScript 难度：★ 一个网页由三层组成（html 结构，js 行为，css 表现），一切的东西其实都建立在html上，html里面的dom提供了一些事件，然后通过js封装，我们可以用...js去调用dom上的事件。...事件有很多，有我用过的有我没用过的，今天我想分析一番。 事件流 我们都知道，有两种事件流，一个是冒泡一个是捕获。 捕获就是从body开始到你触发事件的节点，从外到内的一个过程。...event.stopPropagation() //阻止传递下去，一帮用在一些自定义组件上，比如遮罩隐藏，在弹框上就要阻止传递了。 event.target //触发事件的元素，事件委托会用到。...控件事件 input 当内容发生改变的时触发，有可能是代码触发的改动兼容ie的话input propertychange change 当失去焦点时，内容改变触发 blur 失去焦点触发 focus 获得焦点触发
这是不对的，无障碍软件可能无法识别到它是有点击事件的，就不会播报出来。建议点击事件尽量只绑定在或这种原生clickable的元素上，而不是上。3....管理焦点如果需要主动管理焦点（例如页面初始焦点放在大标题上、弹窗打开时切换焦点至弹窗标题、弹窗关闭时恢复之前的焦点位置），需要通过element.focus()方法来控制焦点，但只有、这种可交互结点才会被focus成功，这种纯展示结点不会被focus，需要设置tabindex="-1"（不要设置为非负整数，非负整数会允许键盘通过tab激活该焦点），再设置样式outline...页面内有弹窗，需要管理焦点，开启弹窗时，focus弹窗标题（也可focus“关闭”）。关闭弹窗时，focus打开弹窗之前的焦点。...打开弹窗时，弹窗下的所有元素都不应该被激活（通过左右滑动手势，不应该选中弹窗底部元素）。
scroll-view横向滚动的时候，包含文字图片等，元素错位，第二个元素掉下去； 给 scroll-view 子元素添加： vertical-align:top; 补充：scroll-view 的使用...小程序在开发时，读取到服务器的内容如果是html格式的，因小程序不支持html格式的内容显示的，因此要对html格式的内容进行编译，可以通过wxParse来实现。...写输入框的时候，想实时获取输入框的焦点。...focus' bindfocus="focus" /> // 获取到焦点 focus:function(e){ var that...}) }, // 失去焦点 no_focus: function (e) { this.setData({ focus: false }) }, 用户在使用输入框时手机输入法的键盘会往上划动
事件冒泡 事件冒泡认为事件应该由最具体的元素开始触发，然后层层往父级传播： ? 事件捕获 而事件捕获则相反，认为最外层的元素应该最先收到事件，然后层层往下级传递： ?...可以通过指定 addEventListener 的第三个参数为 true 来设置事件是在捕获阶段调用事件处理程序，默认是 false 指在冒泡阶段调用事件处理程序。...，而 DOM0 如果给同一个元素绑定多个相同类型的事件处理程序的话，则后面添加的会覆盖前面定义的； 它有几个注意事项： 如果不需要在捕获阶段进行拦截操作，则 useCapture 即第三个参可以不传；...，比如 onload、resize、scroll、input、select 等； 焦点事件(FocusEvent)：在元素获得和失去焦点时触发，比如 focus、blur； 鼠标事件(MouseEvent...事件委托 事件委托是指将多个元素上绑定的事件通过利用事件冒泡的原理从而转移到他们共同的父级上去绑定，从而在一定程度上起到性能优化的作用，有的人也喜欢叫它事件代理。
jQuery中有一个focus()方法能设置对象的焦点，在1.7以下的版本中，不管对象是不是disabed状态，这个方法都不会报错（只是当disabled时，设置焦点的代码无效），但在1.7版本中，如果对象是...意思是：不可见或不可用的元素无法获取焦点。（特别提一下：IE9很NB，能自动识别这种情况，在IE9下不会报错，但是IE9以下的版本全挂。） 测试 js" type="text/javascript...type="button" value="Test" onclick="fnTest()"/> 虽然只是一个小变化，但是却很容易造成大杯具，特别是你的js...代码，在focus()之后，还有其它很多事情要做时：） 建议： 如果一定要用最高版本的jQuery，最省事的办法莫过于在写xxx.focus()时，加一个try/catch，变成 try{xxx.focus
这也意味着通过 addEventListener() 添加的匿名函数将无法移除。 大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。...UI(User Interface，用户界面)事件，当用户与页面上的元素交互时触发 焦点事件，当元素获得或失去焦点时触发 鼠标事件，当用户通过鼠标在页面上执行操作时触发 滚轮事件，当使用鼠标滚轮(或类似设备...JavaScript 错误时在 window 上面触发，当无法加载图像时在 img 元素上面触发 scroll: 当用户滚动带滚动条的元素中的内容时，在该元素上面触发 resize: 当窗口或框架的大小变化时在...有以下 4 个焦点事件: blur: 在元素失去焦点时触发 focus: 在元素获得焦点时触发 focusin: 在元素获得焦点时触发。...这个事件与 HTML 事件 focus 等价，但它冒泡 focusout: 在元素失去焦点时触发。
事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发）...() DOM加载完成 resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单 编写一个form表单，用来演示输入框获取焦点和失去焦点的示例 ?...好了，有了基本的HTML架构之后，就可以来演示了。 focus() 元素获得焦点 首先先来这个focus()函数。 ? 可以看到当获取焦点的时候，就立即弹出alert()。...其实通过focus()函数只是简单用来初始化文本框的焦点输入的而已，如下： ? 当刚进入页面，文本框就自动获取焦点，这基本上就是这个方法的大部分用法了。...blur() 元素失去焦点 使用blur()失去焦点这个方法一般会结合获取文本框内容的函数一起使用，如下： ? 当获取到文本框内的值之后，就可以对其进行正则验证或者其他方式的校验。
2.异常真正强大的地方在于你可以在堆栈上设置一个“障碍物”，当异常缩减堆栈到达这个位置时会被捕获。接着你就可以对异常进行一些处理，并使得程序从异常捕获点开始继续执行。...event.target.textContent C.默认动作 调用event.preventDefault，不执行默认的动作 D.焦点事件 focus和blur事件，不会传播！...填充或stroke勾勒轮廓 7.drawImage从一张图片或另一个画面上移动像素到我们的画布上 8.translate、scale与rotate进行图形变换，一个变换的状态可以通过save来保存，通过...比单纯的HTML更加难以使用，但是更加强大。 2.画布的基于像素的方法在需要绘制大量的微小元素时会有优势，不会构建新的数据结构 而是仅仅重复的在同一个像素上绘制，使得画布在每个图形上拥有更低的消耗。...通过focus和blur方法来控制聚焦 B.作为整体的表单 1.当一个域被包含在元素中时，其DOM元素会有一个form属性指向form的DOM元素，元素则会有一个叫作elements
() { var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） var len = $("#focus ul li").length; //获取焦点图个数...showPics(index); }); //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度 $("#focus ul").css("width"...var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 $("#focus ul").stop(true,false).animate({"left"...:nowLeft},300); //通过animate()调整ul元素滚动到计算出的position $("#focus .btn span").stop(true,false).animate({...; 具体效果可以参看 效果演示 这里先给大家一个开胃菜，后面会抽时间简单说一下如何在 RunJS上发布自己的小程序以及使用RunJS的一些小技巧。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
