-
element el-tree直接行内编辑时阻止冒泡触发node-click事件
2019-07-25 20:22:00 -
关于jquery的obj.click()、和obj.on()以及行内的onclick事件
2017-07-29 14:27:17一般通过jQuery写触发事件是我们通常写的是obj.事件类型()。 以下以点击事件为例： 通常我们直接写obj.click();...行内的onclick事件也可以实现对js的动态绑定事件。 以下是我自己整理的关于三种写法的使用展开全文一般通过jQuery写触发事件是我们通常写的是obj.事件类型()。
以下以点击事件为例：
通常我们直接写obj.click();实现点击事件的效果，但是这种写法不支持动态元素或样式绑定事件。
支持动态元素绑定事件的是.live()和.on()。live在jquery1.7以后就不推荐使用了。
行内的onclick事件也可以实现对js的动态绑定事件。
以下是我自己整理的关于三种写法的使用，以便以后查看：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="content"> <button id="add" οnclick="add()">添加</button> <button id="onadd" οnclick="onAdd()">on添加</button> <ul id="ul"> <li>菜单一 <span οnclick="delect(this);">删除</span></li> <li>菜单二<span οnclick="delect(this);">删除</span></li> <li>菜单三<span>删除</span></li> <li>菜单四<span>删除</span></li> <li>菜单五<span>删除</span></li> <li>菜单六<span>删除</span></li> </ul> </div> <script src="js/jquery.min.js"></script> <script> function add(){ $('#ul').append('<li>菜单666<span>删除</span></li>') } function onAdd(){ $('#ul').append('<li>on菜单666<span οnclick="delect(this);">删除</span></li>') } function delect(obj){ $(obj).parent().remove(); console.log('onclick'); } /*$('ul li span').click(function(){ $(this).parent().remove(); console.log('click'); });*/ $(document).on('click','#ul li span',function(){ $(this).parent().remove(); console.log('on'); }); </script> </body> </html>注意：此处有一个jquery的引入。
此处.on的事件绑定用法是：.on(events,[,selector][,data],handler)，.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，
原理是：事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理。
好处是：万一子元素非常多，给每个子元素都添加一个事件会影响到性能；为动态添加的元素也能绑定指定事件。
-
defind 点击事件not_关于行内元素onclick事件，为什么会出错?
2020-12-20 06:20:12写成这样看看$(function() {leftMenu();...}function leftMenu() {var html = 'click me'$('#box').append(html);}})直接调show()它其实是立即执行的，如果写成onclick="show()",$(document).ready()是文档加载完...展开全文写成这样看看
$(function() {
leftMenu();
function show() {
alert('hhhhhhhh');
}
function leftMenu() {
var html = '
click me'$('#box').append(html);
}
})
直接调show()它其实是立即执行的，如果写成οnclick="show()",$(document).ready()是文档加载完后执行的，当页面结构完成了，你再点击触发show(),这个时候就会去window下面查找show(),当然结果就是undefined
如果实在要写在$(funciton(){})里，可以这样做：
$(function() {
leftMenu();
/*function show() {
alert('hhhhhhhh');
}*/
function leftMenu() {
var html = '
click me'$('#box').append(html);
}
//做个事件委托
$('body').on('click', $('.show'), function() {
alert('aaaaa')
})
})
-
解决多次触发change或click事件系统卡死问题
2019-04-09 12:05:35最近使用bootstrap table的时候，自己写了个表格行内编辑，其中有2个select选择器A、B，要在每次改变了select选择器A的值时触发另一个select选择器B的onchange事件。过程中使用了$(ele).trigger('change')来触发...展开全文最近使用bootstrap table的时候，自己写了个表格行内编辑，其中有2个select选择器A、B，要在每次改变了select选择器A的值时触发另一个select选择器B的onchange事件。过程中使用了$(ele).trigger('change')来触发select选择器B的onchange事件，但是由于本人做的行内编辑表格要求可同时编辑多行，多行编辑的时候在三行及三行以内select的触发事件都未表现出异常，但是，当第四行也点击触发了onchange事件，系统就会卡死崩溃。
在网上参考了别人的解决思路，总结了自己的问题原因大致如下：
多行编辑，select具有不同id但有相同class且绑定的是同一个onchange方法，可能造成了多个事件互串的情况。
解决方法如下：
使用$(ele).off('change')解除其他行select选择器B的绑定事件。再进行当前选择器的$(ele).trigger('change')事件。
$(".c_select").each(function(){//c_select为select的class，循环解除所有select绑定事件 $(this).off('change'); }); $("#versionCode_"+idx).trigger('change');//触发当前select的onchange事件
-
el-table经过@row-click点击事件后出现边框
2020-12-11 17:14:23最近在写列表时，用到了el-table标签，但是经过点击行内tr标签时，出现了难看的...:focus接受键盘事件或其他用户输入的元素。 所有主流浏览器都支持:focus。其中:focus选择器在IE8中必须声明<!DOCTYPE>. ... -
使用js编写行内编辑器
2016-11-22 17:23:25使用js编写行内编辑器由于工作需要，需要一个行内编辑器，从网上看到x-editable很好用，但是奈何他的js和系统本身的js有冲突，无奈之下，自己写了一个行内编辑器：代码块首先在需要编辑的行中添加click事件，例如： ... -
elementUI的table实现行内编辑的两种方法
2021-05-07 15:16:45在行内添加button，并直接操作当前数据对象，变更其值用来控制当前行或当前列是否修改，注意看几个button的click事件 如果在表格外部使用按钮操作，则定义一个method，传递行数据在table原始数据中的index，在... -
GridView行内LinkButton传递值问题
2012-08-21 11:27:29方法一： ...然后在Click事件中 LinkButton lb = (LinkButton)sender; int id = Convert.ToInt32(lb.CommandArgument); 方法二： 添加一个commandname 后台gridview rowco -
javascript事件编程
2018-01-25 22:24:07javascript事件编程在实际的使用中是比较常见的，本文简单mark一下。主要内容包括：事件处理程序、常用事件、绑定事件方式、事件冒泡、默认行为以及事件对象...为事件指定处理程序的方式有好几种，比如行内绑定、动态绑 -
JS的事件处理详解
2020-06-09 23:51:39事件就是用户的某个动作，事件处理就是一个用来处理...事件是名词字符串，例如click，事件处理是函数，以on开头，例如onclick。 行内添加 例如 <button type="button" onclick="change1()">Boom!</button> -
web前端 js学习 第十三天（ 事件 ）
2021-04-07 17:28:44事件 事件：事情发生并得到处理 事件的三要素 ： 事件源 + 事件... 1 行内js绑定事件 2 对象绑定事件 3 事件监听的方式 -- 不会发生覆盖 addEventListener('click' , fn) attatchEvent('onclick' , fn) 低版本I -
事件的三种绑定方式
2019-11-09 10:21:221.行内式绑定事件处理 <input type="button" value="click" style="color:red" onclick="console.log(this.style.col... -
六、jQuery中的事件
2019-02-25 21:02:491.原生js （3种：行内绑定、基本绑定、事件监听） 2.jquery 结构层和行为分离（不能行内绑定） 3.（1）基本绑定 $("#btn").click(function(){ console.log("1"); }); //可以... -
angular 点击事件阻止冒泡及默认行为
2019-07-04 14:34:00经常遇到场景：多层级元素绑定ng-click 事件，则底层元素的点击事件存在冒泡现象，怎么解决？ 类似原生JS ,只是语法稍有不同，如下： 阻止冒泡 $event.stopPropagation() 阻止默认行为 $event.preventDefault() ... -
jquery 绑定未来元素事件
2021-03-16 15:45:471，用js动态生成dom元素很常见，那么给这种动态生成的元素如何绑定事件呢？首先排除click，是肯定不好用的。下面来介绍集中方法。 1) 直接行内绑定 <div onClick="doSomething()"></div> 2) ... -
关于动态添加的html元素绑定的事件不生效的解决办法
2019-10-09 06:01:051.可以通过行内添加事件的方法，比如onclick="fn()";在js中写好方法名对应的方法就可以了，如果绑定方法的元素太多 2、jquery的on事件绑定 //on事件可以给动态添加的元素也绑定事件。 $("#content").on('click',... -
Vue 事件监听 v-on
2020-06-30 12:55:231.v-on的基本使用及语法糖 <div id=“app”> <h2>{{counter}}</h2> <button v-on:click="counter++">... //点击事件 所以后面接click //行内表达式 <button @click="incre -
给动态添加的html元素绑定事件的方法
2020-11-22 17:26:351、动态添加的时候加行内事件，比如οnclick=“funcName()” 在js中写好方法名对应的方法就可以了，如果绑定方法的元素太多，可以考虑使用方法二； 2、jquery的on事件绑定 eg: on事件可以给动态添加的元素也绑定事件... -
与dom事件流相关的二三事
2018-11-08 10:52:13向dom绑定事件的事件的三种方式 行内绑定 <button onclick="clickhander()">按钮</button> js内绑定 btnDom.onclick = function clickHandler() { console.log('click'); } 事件监听器绑定 btnDom.... -
动态添加的html元素绑定事件的方法
2018-07-06 15:28:001、动态添加的时候加行内事件，比如onclick="funcName()" 在js中写好方法名对应的方法就可以了，如果绑定方法的元素太多，可以考虑使用方法二； 2、jquery的on事件绑定 eg: on事件可以给动态添加的元素也绑定... -
jQuery on() 事件委托 IOS 无效的解决办法
2019-06-06 15:06:32给委托事件元素添加行内样式，style="cursor: pointer;"； 事件添加到可点元素上例如<a>、<button> 等可点击元素； 委托事件添加到非html,body的父级元素上； 推荐使用第2种方法，... -
elementUI表格行点击事件
2018-09-19 09:31:46row-click： 当某一行被点击时会触发该事件,参数（row, event, column）； 当表格内容显示过多时，用户来回滚动滚动条查看会比较麻烦，这时可以点击行内元素显示一整行的详细信息，可以配合elementUI里的弹出框实现... -
jQuery注册表格(table)行(tr)点击选中checkbox事件
2017-07-20 14:46:14目的实现鼠标点击表格行元素，就可以选中所在行内的复选框，实现数据勾选效果。多用于管理系统中数据列表上。... //除了表头（第一行）以外所有的行添加click事件. $("tr").slice(1).click(function () { -
JS脚本的加载
2021-01-23 16:51:31行内引入方式必须结合事件来使用，但是内部 js 和外部 js 可以不结合事件 <body> <input type="button" οnclick="alert('行内引入')" value="button" name="button" /> <button οnclick=... -
WebAPI基础（二）
2019-01-24 23:44:38WebAPI基础（二）知识点 事件三要素 事件源 事件类型 事件处理函数 当 &... style 行内样式 className 类名 事件类型 单击 click 双击 dblclick 鼠标移入 mouseover / mou...
收藏数
54
精华内容
21