event.srcElement妙用

最新推荐文章于 2023-09-05 21:16:53 发布
最新推荐文章于 2023-09-05 21:16:53 发布
阅读量651 收藏 2
点赞数
分类专栏： Jquery/Javascript 文章标签： javascript function html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wyqlxy/article/details/5144723
版权

<html>
    <script language="javascript" type="text/javascript">

    document.onmousedown = function()
    {
      alert( event.srcElement.id);
    }
    </script>
<body>
<div id="div1" style="background-color:Red">
hello baby
<div>
</body>
</html>

 

我们通过这个JS方法的属性得到控件的区域和控件以外的区域，比如可以实际应用到：弹出层，当鼠标不在层区域时，就隐藏层

当然我们也可以用event.x,event.y去取得空间区域在页面上的位置，然后通过X轴Y轴去判断,是否出了本区域

vue @click 获取 html5 data-属性
Javavison的博客
08-22 1195
data-* = “” 在vue中使用时，不可以存对象类型属性否则会直接输出[object object] data-id 获取数据： $ event.srcElement.dataset.id <div @click="getId" data-id="1"></div> methods:{ getId(e){ e.srcElement.dataset.id } } @click=“getId” 不传参数，在methods中，如果给一个参数，这个参数就是$event getId
event和srcElement说明,方法,技巧
03-21
event和srcElement说明,方法,技巧.doc
event.srcElement　说明　方法　技巧
天涯 书塾
05-08 3912
event.srcElement从字面上可以看出来有以下关键字：事件,源     他的意思就是：当前事件的源，我们可以调用他的各种属性 就像:document.getElementById("")这样的功能，经常有人问 firefox 下的 event.srcElement 怎么用，在此详细说明：IE下,event对象有srcElement属性,但是没有target属性;Firefox
Vue事件（$event）
qq_36582776的博客
11-02 7013
1.Vue事件处理 <div id='div1'> <button v-on:click="showInfo1">提示信息1</button> <button @click="showInfo2($event,666)">提示信息2</button> //@是v-on:的简写形式 <div> <script> const vm=new Vue({ el:'#div1',
vue事件传值使用 dataset 对象传值
最新发布
每天都想吃好吃的
09-05 262
【代码】vue事件传值使用 dataset 对象传值。
js事件源window.event.srcElement兼容性写法(详解)
10-21
也就是说，不能直接通过window.event.srcElement来获取事件源，而应该使用事件对象的srcElement属性，或者在火狐中使用target属性。因此，当我们想编写一份兼容所有主流浏览器的代码时，就需要采用特定的兼容性写法...
替代window.event.srcElement效果的可兼容性的函数
05-04
在JavaScript编程中，特别是在处理事件时，`window.event` 是一个内置对象，它提供了与当前事件相关的各种信息，如事件的目标元素（`event.srcElement` 在IE中，`event.target` 在非IE浏览器中）。然而，`window....
js中的触发事件对象event.srcElement与event.target详解
10-20
如果要访问特定的子节点，可以使用数组索引，比如event.srcElement.children[0]或event.srcElement.children[1]。 事件对象还提供了其他属性来获取节点的更多信息。例如，event.srcElement.tagName可以获取到触发...
event.srcElement 用法笔记e.target
09-05
这行代码会检查`event.srcElement`是否存在，如果存在则使用它，否则使用`event.target`。 此外，`event.srcElement`还可以用于获取触发事件元素的各种属性，如ID、标签名、类型、值、名称和类名等。下面的示例展示...
event.srcElement的用法(转载)
02-03 350
event.srcElement从字面上可以看出来有以下关键字：事件,源     他的意思就是：当前事件的源， 我们可以调用他的各种属性 就像:document.getElementById("")这样的功能， 经常有人问 firefox 下的 event.srcElement 怎么用，在此详细说明： IE下,event对象有srcElement属性,但是没有target属性;Firefox
兼容版的element.dataset
weixin_39612961的博客
10-29 715
1. data 与 dataset的定义与使用 data-* 属性是 HTML5 中的新属性, 我们可以使用data-前缀设置需要的自定义属性，来存储页面或应用程序的私有自定义数据, 我们可以使用dataset属性（对象）访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集 例子： &lt;div id="student" data-age="12" data-...
event.srcElement说明,方法,技巧
weixin_30519071的博客
11-26 123
event.srcElement从字面上可以看出来有以下关键字：事件,源 他的意思就是：当前事件的源，也就是用它可以获得正在触发事件的对像我们可以调用他的各种属性 就像:document.getElementById(”")这样的功能，(event.srcElement.styl.borderColor="Red";)经常有人问 firefox 下的 event.srcElement 怎么用，在此...
学习使用vue（笔记）
weixin_45826772的博客
10-10 508
1：vue基本语法 1.1：基本数据类型和字符串 取值: {{code}} {{str}} data:({ code:100 str:"test" }) 1.2: 对象数据类型 支持ognl语法取值: {{stu.name}} {{stu.age}} data:({ stu{ name:"zhangsan" age:12 } }) 1.3:if判断语句 <div id="container"> <label class="c" v-if="
vue中$event的使用
热门推荐
看表该写博客了
05-23 1万+
$event分两种：第一种: 自定义组件（不如自定义父子组件或者elementui/iview组件）的$event 第二种： html原生的$event 先来看第一种吧--自定义组件的$event $event代表的就是 济南 青岛 这个选中的值，此时$event就代表传参 第二种 html原生的$event $event此时是获取的dom元素即 MouseEvent鼠标点击的这个按钮元素，(可理解为当前标签的属性) console....
Vue中推荐的传值方式（从html到js)
专注微信小程序
10-05 1929
Vue推荐使用event事件来发送参数，用event里的dataset来接收参数
Event.srcElement 中属性介绍
yenching的专栏
08-06 6696
<br />最近在看别人的代码遇到event.srcElement.parentElement.parentElement.nextSibling <br />有点蒙，我用的比较少，对他的理解不够，正好趁这个机会，了解学习下他，哈哈 <br />1.event.srcElement.parentNode.tagName; <br />得到上一个节点的标签名称 <br />eg: <br /><div style="border:10px red solid"> <br /><input type="butt
初学者可能不知道的vue技巧
dianziagen的博客
03-04 819
1.setTimeout/ setInterval 场景一：this指向改变无法用this访问vue实例 mounted(){ setTimeout( function () { //setInterval同理 console.log(this); //此时this指向Window对象 }，1000) ; } 解决方法:使用箭头函数或者...
obj.onmousedown = function(event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#1AAB8A") { num1 = num1 + 200; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#E15650") { num2 = num2 + 300; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#121B39") { num3 = num3 + 400; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor = "#80A84E") { num4 = num4 + 500; } //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 //显示得分 num=num1+num2+num3+num4; count.innerHTML = '当前得分: ' + num; } 为什么错了
05-24
这段代码可能出错的地方有： 1. 在 if 语句中，比较颜色值时应该使用双等号 `==`，而不是赋值符号 `=`。 2. 在比较颜色值时，应该使用 RGB 值而不是颜色名称。例如，应该使用 `rgb(26, 171, 138)` 而不是 `#1AAB8A`。 3. 在计算得分时，应该将四个得分相加，而不是分别累加到 num1、num2、num3 和 num4 中。 下面是修改后的代码： ``` obj.onmousedown = function(event) { //点击的不是白盒子 // 兼容IE event = event || window.event; if ((event.target ? event.target : event.srcElement).className == 'i') { if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(26, 171, 138)") { num1 = num1 + 200; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(225, 86, 80)") { num2 = num2 + 300; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(18, 27, 57)") { num3 = num3 + 400; } else if ((event.target ? event.target : event.srcElement).style.backgroundColor == "rgb(128, 168, 78)") { num4 = num4 + 500; } //点击后的盒子颜色 (event.target ? event.target : event.srcElement).style.backgroundColor = "#bbb"; //清除盒子标记 (event.target ? event.target : event.srcElement).className = ''; //计分 //显示得分 num = num1 + num2 + num3 + num4; count.innerHTML = '当前得分: ' + num; } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值