IE有许多好用的方法,后来都被其他浏览器抄袭了,比如这个contains方法。如果A元素包含B元素,则返回true,否则false。唯一不支持这个方法的是IE的死对头firefox。
给出如下解决方法。
if (window.Node && Node.prototype && !Node.prototype.contains){
Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16)
}
}
网上找出个更短的:
if(!!window.find){
HTMLElement.prototype.contains = function(B){
return this.compareDocumentPosition(B) - 19 > 0
}
}
<!doctype html>
<title>dom contains 方法 by youyou</title>
<meta charset="utf-8"/>
<meta name="keywords" content="dom contains方法 by youyou" />
<meta name="description" content="dom contains方法 by youyou" />
<script type="text/javascript">
if(!!window.find){
HTMLElement.prototype.contains = function(B){
return this.compareDocumentPosition(B) - 19 > 0
}
}
window.onload = function(){
var A = document.getElementById('parent'),
B = document.getElementById('child');
alert(A.contains(B));
alert(B.contains(A));
}
</script>
<h2 style="text-align:center">contains方法</h2>
<div id="parent">
<p>
<strong id="child" >contains方法</strong>
</p>
</div>
实践:项目中用到的鼠标移上去显示下拉层,鼠标可移动到下拉层上:
if(typeof(HTMLElement)!="undefined"){
HTMLElement.prototype.contains=function(obj){
while(obj!=null&&typeof(obj.tagName)!="undefind"){
if(obj==this){
return true;
}
obj=obj.parentNode;
}
return false;
};
}
function hideBox(event){
event=event||window.event;
if(event){
var isIE = /msie/i.test(navigator.userAgent);
if (isIE){
if(document.getElementById('stateList').contains(event.toElement)){
return;
}
}else{
if(document.getElementById('stateList').contains(event.relatedTarget)){
return;
}
}
}
$('#stateList').hide();
}
分享到:
相关推荐
主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下
一个很棒的 blog 文章,是 PPK 两年前写的,文章中解释了 contains() 和 compareDocumentPosition() 方法运行在他们各自的浏览器上。
It contains: Build a Full-Sphere 3D Image Gallery with React VR by Michaela Lehr Build a WebRTC Video Chat Application with SimpleWebRTC by Michael Wanyoike Build a JavaScript Single Page App Without...
It contains: The Anatomy of a Modern JavaScript Application by James Kolce Clean Code with ES6 Default Parameters & Property Shorthands by Moritz Kruger JavaScript Performance Optimization Tips: An ...
While conceptually simple, this programming model contains numerous subtleties and be- haviors that are de ned implicitly by the current Node.js implementation. This paper presents the rst ...
it contains the advanced concept and technology included the object oriented javascript
Modern JavaScript Tools & Skills contains a collection of articles outlining essential tools and skills that every modern JavaScript developer should know. This book is for all front-end developers ...
原来,js的contains方法用来查看dom元素的包含关系,并不是Java中数组的contains方法。 先看一下duyunchao同学分享的代码 $(document).ready(function() { var Arrays = ['11','22','33']; var Array ='11'...
Today, JavaScript is taking the world by storm. Having logic shared between your JavaScript frontend and backend ... It also contains a few recipes on how to deploy your app to a cloud hosting service.
JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...
This practical resource contains 100 ready-to-run JavaScript plug-ins you can use to create dynamic Web content. The book begins by explaining JavaScript, Cascading Style Sheets (CSS), and the ...
<br/>Finally, the third section contains six appendices, chock full of useful reference material: the character set, reserved words, a review of HTML, the JavaScript operators, JavaScript's ...
Contains numerous hands-on examples Explains implementation of real-time apps including Socket.IO and HTML5, and WebSockets Addresses practical Node.js advantages from specific design choices ...
ArcGIS Server Javascript API The API Reference contains detailed descriptions for each class in the ArcGIS JavaScript API. Use the API Reference to find out what constructors, properties, methods, and...
1.实现文档对象的属性; 2.实现文档对象的属性方法; 3.... 问:如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表: ...alert("This document contains contains"+tables.length+"tables");
下面的JS代码,为String对象定义了一个contains方法用于判断字符串是否包含子字符串,非常有用。 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(obj, start) { for (var i = (start || 0)...
在C#语法中判断集合是否包含某个元素可以使用Contains方法,但是类似的问题在javascript中要怎么处理呢,js中没有Contains方法。 我们可以利用js的原型扩展来封装一个我们自己的Contains方法。 js代码: 代码如下: ...