由object元素引出的事件注册问题和层级显示问题

时间:2022-09-04 08:44:01

项目有一个双击监控视频全屏的需求,视频播放使用的是IE下的ActiveX控件,web页面中使用HTML嵌入对象元素object。预期方案如下:

1.在开发ActiveX控件时加入双击事件。

2.通过div包裹object,控制div的大小从而间接实现全屏效果。

在实施第二种方案的过程中,发现如下两个问题:

事件注册问题

在第二种方案中,首先经过测试添加单击或双击事件均无响应。

(疑问1:object不支持单双击事件?但在IE下发现这种方式可以响应:

function fullscreen(a){alert(a);}
/**
*错误的方式:不传参数,会弹出undefined,会直接执行fullScreen函数,这段代码相当于如下两行:
*var temp=fullScreen(); 
*document.getElementById("objectid").onclick=temp;
*/
document.getElementById("objectid").onclick=fullScreen();
/**
*错误的方式:传参数时,会弹出1,会直接执行fullScreen函数,这段代码相当于如下两行:
*var temp=fullScreen(1); 
*document.getElementById("objectid").onclick=temp;
*/
document.getElementById("objectid").onclick=fullScreen(1);
/**
*正确的方式,此时会弹出event对象,但由于object元素不支持事件所以并不响应
*/
document.getElementById("objectid").onclick=fullScreen;
结论:在通过对象的属性注册事件函数的时候,表达式的右值必须为一个函数名字即不带括号,并且不可手动传递参数(浏览器会将event对象自动传入或window.event),
从表达式本身出发我们也能发现,表达式为一个赋值表达式,‘=’的右值是一个指向函数的地址,
当只写函数名字的时候,此时右值的函数名字相当于一个指针,指向函数体所在的内存地址,等到事件发生时就会调用并执行相应的函数。
但是当加了括号后,会首先计算右边的函数体,而函数体执行必然会返回一个值(显示的return返回值或undefined),这个值则会作为右值赋值给onclick等类似的属性。
 

经过测试,在IE下,不管是属性注册事件或者方法注册事件均不能响应。即Object作为一个嵌入对象元素是不支持浏览器中各种事件的,这样做的目的可能是作为一个引用外部资源的元素来说,object本身不具备响应事件的能力,而把这种交互能力给予外部的对象,以避免类似ActiveX这样的控件的行为与object的行为冲突。

层级显示问题

然后我想通过透明div覆盖object,给div添加单双击事件,但是发现div无法覆盖,查阅后才知道object似乎拥有很高的层级。

(疑问2:object作为嵌入对象元素是否在web文档流中?我的猜测:从web历史上来看,web文档最初是用来显示文本的,作为引用外部资源的object元素是不在文档流中的,而且我发现在ie下选取元素的时候是无法选取到object元素的,其他浏览器暂时未测试。)

从查阅得知iframe的层级高于object,于是便设置div覆盖iframe,iframe覆盖object,从而间接实现div覆盖object。

虽然覆盖可以实现,但是有一个问题就是当div和iframe都设置透明时,object似乎夹在二者中间被贯穿了,直接一透到底,透明的下面不是object,而是网页的底色。

 <div class="wrap2-item-video1">
<div ondblClick="fullScreen()" style="color:#fff;font-size:12px;position:absolute;background:green;width:50px;height:50px;top:0;left:0;z-index:9;">
放大/缩小
</div> <iframe style="background:red;position:absolute;visibility:inherit; top:0px;left:0px;width:100px;height:100px;z-index:1;"></iframe> <object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2" codebase="" standby="Waiting..."
id="playOcx" width="100%" height="100%" name="playOcx" align="center">
<param value="transparent" name="wmode">
</object>
</div>

由object元素引出的事件注册问题和层级显示问题

如上,div(绿色,zindex:9),iframe(红色,zindex:1),object三者的层级关系。

由object元素引出的事件注册问题和层级显示问题

修改div的背景,添加边框,修改iframe的背景后,如上,div(红色边框透明,zindex:9),iframe(透明,zindex:1),object三者的层级关系。

最后:似乎第二种方案并不可行,只能修改成通过不在object元素范围内的元素控制大小的方案,比如在页面里添加个button并绑定事件或者重写控件添加交互事件。

由object元素引出的事件注册问题和层级显示问题的更多相关文章

  1. JavaScript DOM动态创建(声明)Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

  2. &lbrack;JavaScript&rsqb; JavaScript事件注册&comma;事件委托&comma;冒泡&comma;捕获&comma;事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  3. C&num;中的事件注册和注销

    C#中的事件注册和注销 由于.NET框架对消息循环机制进行了很好的封装,开发人员不再需要深入的了解Windows事件/消息实现的具体机制,也无需创建复杂的事件结构体和所谓的消息句柄.我们所要做的无非就 ...

  4. js阻止元素的默认事件与冒泡事件

    嵌套的div元素,如果父级和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,从而带来一定的影响. 1. event.preventDefault();  -- 阻止元素的默认 ...

  5. html object元素

    知道object是播放音频,但是想了解具体点,百度一下,感觉模模糊糊的,感觉看不大明白,最后找到一个解释比较详细,先从应用,到解释具体属性, 具体网址是: http://www.w3school.co ...

  6. Flex timer使用 keydown事件注册到stage

    Flex timer使用 keydown事件注册到stage: <?xml version="1.0" encoding="utf-8"?> &lt ...

  7. flex 事件注册和鼠标拖动

    flex 事件注册和鼠标拖动 <?xml version="1.0" encoding="utf-8"?> <s:Application xm ...

  8. 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异

    标准参考 OBJECT 元素定义了一个嵌入的对象.其引入的初衷是取代 IMG 和 APPLET 元素.不过由于安全等各方面原因以及缺乏浏览器支持,这一初衷并未实现.浏览器的对象支持依赖于对象类型.然而 ...

  9. React笔记-事件注册

    事件机制 本系列以React v16.8.3为基础进行源码分析 React事件主要分为两部分: 事件注册与事件分发.下面先从事件注册说起. 事件注册 假设我们的程序如下: <!DOCTYPE h ...

随机推荐

  1. volley用法之 以post方式发送 json 参数

    需求是这样 我们需要发送一个post请求向服务器要参数.要求是发送的post参数也要是json格式. 简单一点的是这样的: 如果要发送的是这样简单的json格式,我们可以简单的使用map来实现: Re ...

  2. 第十七篇:使用窗口的cache属性加速SOUI的渲染

    内容渲染速度是决定一个UI成败的关键.无论UI做得多华丽,没有速度都没有意义. 在MFC,WTL等开发框架下,每个控件都是一个窗口,窗口只需要画前景,背景.因为窗口之间的内容不需要做混合,一个子窗口的 ...

  3. linux服务之udevd

    http://www.ibm.com/developerworks/cn/linux/l-cn-udev/[root@localhost ~]# uname -r2.6.32-431.el6.x86_ ...

  4. java&period;lang&period;NoClassDefFoundError&colon; org&sol;apache&sol;lucene&sol;analysis&sol;synonym&sol;SynonymFilter

    2013-6-24 13:28:51 org.apache.solr.common.SolrException log 严重: java.lang.NoClassDefFoundError: org/ ...

  5. IceMx&period;Mvc 我的js MVC 框架 三、动手来写一个评论模块儿

    介绍 本人菜鸟,一些自己的浅薄见解,望各位大神指正. 本框架有以下优点 1.简单(调用简单.实现简单.不过度设计) 2.视图.控制器.模型分离(分离对于维护十分有必要) 3.组件化(每一个mvc模块儿 ...

  6. Android中的广播

    Android中的广播 广播接受器,可以比喻成收音机.而广播则可以看成电台. Android系统内部相当于已经有一个电台 定义了好多的广播事件,比如外拨电话 短信到来 sd卡状态 电池电量变化... ...

  7. 分析MapReduce执行过程&plus;统计单词数例子

    MapReduce 运行的时候,会通过 Mapper 运行的任务读取 HDFS 中的数据文件,然后调用自己的方法,处理数据,最后输出.Reducer 任务会接收 Mapper 任务输出的数据,作为自己 ...

  8. WIN10远程连接,报错身份验证错误,要求的函数不受支持

    我电脑是win10系统,我办公时经常需要远程连接其他电脑.突然间远程连接时就开始报错以下错误,导致无法远程连接. 这可能是由于CredSSP加密Oracle修正. 解决方法: 运行 gpedit.ms ...

  9. PS快速秒抠图技巧

    1,首先,打开图片,复制一层为图层1,养成原图保存好,在新图层上操作的习惯 2,点击菜单栏“选择”选择 - “色彩范围”命令,面板如下图所示: 3, 选择左边第一个吸管工具吸取人物模特后面的背景颜色, ...

  10. IdentityServer4【Topic】之授权类型

    Grant Types 授权类型 授权类型指出了一个客户端如何与IdentityServer进行交互.OpenID Conect和OAuth2.0定义了如下的授权类型: Implicit Author ...