项目有一个双击监控视频全屏的需求,视频播放使用的是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").οnclick=temp;*/document.getElementById("objectid").οnclick=fullScreen();/***错误的方式:传参数时,会弹出1,会直接执行fullScreen函数,这段代码相当于如下两行:*var temp=fullScreen(1); *document.getElementById("objectid").οnclick=temp;*/document.getElementById("objectid").οnclick=fullScreen(1);/***正确的方式,此时会弹出event对象,但由于object元素不支持事件所以并不响应*/document.getElementById("objectid").οnclick=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,而是网页的底色。

1 <divclass="wrap2-item-video1">
2                 <divondblClick="fullScreen()"style="color:#fff;font-size:12px;position:absolute;background:green;width:50px;height:50px;top:0;left:0;z-index:9;">
3 放大/缩小4                 </div>
5
6                 <iframestyle="background:red;position:absolute;visibility:inherit; top:0px;left:0px;width:100px;height:100px;z-index:1;"></iframe>
7
8                 <objectclassid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2"codebase=""standby="Waiting..."
9 id="playOcx"width="100%"height="100%"name="playOcx"align="center">
10                         <paramvalue="transparent"name="wmode">
11                 </object>
12</div>

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

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

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

转载于:https://www.cnblogs.com/luanfujian/p/9324801.html

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

  1. transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

    transitionend过渡监听事件: 过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数,如下案例: <!DOCTYPE html><htm ...

  2. 关于移动端 触摸事件导致子元素不能绑定事件

    近期项目遇到一个问题, 找了一个插件 叫做 移动端按首字母检索城市列表 http://www.sucaihuo.com/js/2305.html 在城市选项这里发现绑定不上事件 找了很多阻止冒泡的事件 ...

  3. 动态添加行 为元素解绑事件 delegate的解绑事件 off的解绑事件

    动态添加行 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...

  4. jQuery学习笔记系列(三)——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例

    day03 - jQuery 学习目标: 能够说出4种常见的注册事件 能够说出 on 绑定事件的优势 能够说出 jQuery 事件委派的优点以及方式 能够说出绑定事件与解绑事件 能够说出 jQuery ...

  5. vue学习:事件传递(冒泡和捕获),事件委托,jquery中的事件委托,$event 获取元素,vue事件修饰符

    事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技 术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...

  6. 在 .NET 中设置页面元素的 javascript 事件 - IEBrowser [5]

    上回重新讲解了 IEBrowser jQuery 方面的方法, 本次向大家介绍其新版本中为页面元素添加 .NET 事件的功能. 在 IEBrowser 的最新版本 2.5.0 中, 增加了 Attac ...

  7. jQuery事件注册、jQuery事件对象、事件处理

    jQuery事件注册 1.单个注册事件 element.事件(function(){函数执行程序}) 例如:鼠标点击div变化背景颜色 $("div").click(functio ...

  8. (2)Echarts图表绑定特殊事件-图表元素绑定选中事件

    在上篇文章中,介绍了Echarts关于元素绑定特殊事件需要做的处理和操作.而本文手把手教大家如何在源码中添加自己定义的事件. 需求介绍 :假设有个需求,一个图表有多根y轴,当用户点击某根轴的范围时,需 ...

  9. 在html上绑定touch,实现html元素跟随touchmove事件的event.touches[0].clientX移动

    主要是使用了transform:translateX 实现 newWaterChart * { padding:0; margin:0; -webkit-box-sizing: border-box; ...

最新文章

  1. Winform/WPF实例中的相互操作
  2. 突然挂了!Redis缓存都在内存中,这下完了!
  3. CheckM——国家微生物科学数据中心云工具
  4. 年薪达60万!11位院士领衔,这座举全省之力打造的科研平台诚聘博士英才
  5. 在微信小程序的JS脚本中使用Promise来优化函数处理
  6. BaaS模式的开发思路
  7. php调mysql接口头文件_php基础系列:PHP连接MySQL数据库用到的三种API
  8. 使用Maven Jetty插件
  9. java最常见的runtime_Java常见runtime exception
  10. SQlite数据库的C编程接口(一) 简介 ——《Using SQlite》读书笔记
  11. MySQL/InnoDB的并发插入Concurrent Insert
  12. C语言二维数组及指针引用
  13. 【多多情报通】看完让人焕然大悟的6种拼多多店铺玩法
  14. 霹雳吧啦Wz语义分割学习笔记P8
  15. 排列奇偶性与排序的关系
  16. java布局FlowLayout
  17. 嘉为蓝鲸荣获广东省电子政务与新型智慧城市发展大会表彰
  18. 【C#】十大排序算法(动图演示+代码实现)
  19. JAVA求职(盘点我这些年曾经面试过的一些公司)
  20. 用Natapp(ngrok)进行微信本地开发调试

热门文章

  1. 剑指offer--在O(1)时间内删除链表结点
  2. 如何下载python模块_Python第三方库(模块)下载和安装(使用pip命令)
  3. 《Java并发编程的艺术》之synchronized的底层实现原理
  4. [UVA 10891] Game of Sum
  5. 为什么objc_msgSend必须用汇编实现
  6. android开发之 SQLite(数据库)
  7. Python运算符优先级
  8. scrollview 与 listView 的显示不全问题
  9. JQ基础练习---图片划过变暗
  10. 查看linux的用户