本文介绍了点击底层元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 你好。 有没有办法让一个元素''透明''到鼠标活动，这样 鼠标事件会转到底层元件？我有一个绝对定位的 图像元素，其透明度部分与另一个元素重叠。我想要重叠图像上的鼠标事件转到底层元素。 谢谢， nf 解决方案 请阅读此处有关事件如何与DOM一起使用的方法。 < URL：http：//www.quirksmode.org/js/contents.html#events> 不同的浏览器有不同的事件模型，但是你需要的行为 基本上是标准的 - 或者你有一个特定的 事件的例子没有被传递给''底层'元素？ - Rob 感谢您的回复和信息网站的链接。不幸的是 我找不到我需要的东西，也许我对我渴望的描述 并不清楚。 我有两张照片。一个是比大多数浏览器窗口更宽的全景，这是我已经放入DIV的一个DIV，它被设计为在右侧剪辑。 图像的重要部分位于左侧，但我想给出 选项来查看整个图像。所以我为DIV设置了一个onclick事件， 切换了clip之间的溢出属性。和自动。这样，如果需要，可以滚动图像 ，但如果没有，则没有丑陋的滚动条。问题 是一个绝对定位的GIF图像与宽图像的底部重叠。大部分重叠在GIF的透明部分， ，这带来两个问题： 1.当有人点击GIF的透明部分时，它没有 触发附加到重叠DIV的事件。 2.当DIV的溢出属性更改为auto时，滚动条 出现在图像的底部。滚动条与 透明GIF重叠，因此在GIF的透明区域中无法访问。 问题可以通过将事件附加到重叠的GIF来克服＃1，但是因为我必须确定光标是否在DIV上，所以是混乱的。 所以，我希望有一些方法可以停用GIF鼠标 事件，这样重叠DIV的处理程序就可以获得所有事件 其中GIF重叠。否则它似乎我将不得不为GIF捕获事件 ，确定它们是否超过DIV，然后更改 的z顺序带来的DIV它位于顶部，因此可以访问滚动条。 nf 下面是一些代码可以满足您的需求。几天前我从FredOz发布的quirksmode.org上复制了一些 的东西。它 检测你的剪辑div的位置，然后根据点击的位置查看是否发生了点击 。 如果它被击中，div的z-index会被提升，所以你可以到达 滚动条。当用户点击图像时，它再次降低 并且溢出设置回隐藏（没有''剪辑''，除非 是微软发明）。 小心使用IE，div外部的点击并不总是在 文件中（IE的页面不会像其他一样填满窗口）浏览器确实如此） 因此有时在图像外部点击不会再次降低它。 只需点击一下即可。 使用getElementById没有测试，但在其他方面应该很漂亮 可靠。在IE和Firefox中轻微评论和测试。 我使用的图像是来自谷歌（a.gif）和雅虎的徽标（b.gif） - 雅虎也有移情。 确保你在px中指定所有需要的维度，因为IE有一个习惯 以任何单位报告事物设置为（％，em等） 如果合适，Firefox往往总是报告px。 <！DOCTYPE HTML PUBLIC" - // W3C / / DTD HTML 4.01 // EN" " http：//www.w3.org/TR/html4/strict.dtd"> < html> < head> < title> Image Overlap< / title> < meta http-equiv =" Content-Type" content =" text / html; charset = ISO-8859-1"> < style type =" text / css"> ..container {border：1px纯红色;} < / style> < script type =" text / javascript"> //记住，如果我们已经用图像提高了div，那么 var raise = false; 函数doClick（e） { e = e || window.event; var x = document.getElementById（''OuterDiv''）; var xTLx，xTLy，xBRx，xBRy，msg; //获取点击位置 var eX = e.clientX + pXoffset（）; var eY = e.clientY + pYoffset（） ; //获取图像的边界值 xTLx = findPosX（x）; //左上角x xTLy = findPosY（x）; //左上角y //添加宽度&高度 if（x.style&& x.style.width）{ xBRx = xTLx + + x.style.width.replace（/ px /， ''''）; } if（x.style&& x.style.height）{ xBRy = xTLy + + x.style.height.replace（/ px /，''''）; } //纯粹用于表演 msg = xTLx +''，''+ xTLy +''< br>''+ xBRx +''，''+ xBRy; msg + =''< br>'' + e.clientX +''，''+ e.clientY; if（eX> xTLx&& eX< xBRx & ;& eY> xTLy&& eY< xBRy）{ if（！raise）{ x.style.overflow =''auto'' ; x.style.zIndex - = -100; // -ve将z-index转换为数字 raise = true; } msg + =''< br>< b个HIT< / b个 ''; //只是为了表演 }否则{ if（raise）{ x.style.overflow =''hidden ''; x.style.zIndex - = 100; 募集=假; } msg + =''< br> miss''; //仅供表演 } //更多节目 msg + =''< br>提出：''+提出+''< br> z-index：'' + x.style.zIndex; document.getElementById（''xx''）。innerHTML = msg ; //仅供演出 } //来自quirksmode.org 函数findPosX（obj）{ var curleft = 0; if（obj.offsetParent）{ while（obj.offsetParent）{ curleft + = obj.offsetLeft obj = obj.offsetParent; } }否则if（obj.x）{ curleft + = obj.x; } 返回curleft; } / /来自quirksmode.org 函数findPosY（obj）{ var curtop = 0; if（obj.offsetParent）{ while（obj.offsetParent）{ curtop + = obj.offsetTop obj = obj.offsetParent; } }否则if（obj.y）{ curtop + = obj.y; } 返回curtop ; } //来自quirksmode.org 函数pXoffset（）{ if （self.pageXOffset）{//所有除了资源管理器 返回self.pageXOffset; }否则if（document.documentElement && document.documentElement.scrollTop）{// Explorer 6 Strict return document.documentElement.scrollLeft; } else if（document.body）{//所有其他探险家 返回document.body.scrollLeft; } } //来自quirksmode.org 函数pYoffset（）{ if（self.pageYOffset）{//所有除了资源管理器 返回self.pageYOffset; } else if（document.documentElement && document.documentElement.scrollTop）{// Explorer 6 Strict return document.documentElement.scrollTop; }否则if（document.body）{//所有其他探险者 返回document.body.scrollTop; } } < / script> < / head> < body onclick =" doClick（event）"> < div class =" container" ID = QUOT; OuterDiv" style =" 溢出：隐藏;位置：绝对;上：50px;左：100px; z-index：1;宽度：100px;身高：100px; "> < img src =" a.gif" name =" imageA">< / div> < div class =" container" style =" position：absolute;上：100px;左：100px; z-index：5; < img src =" b.gif"名称= QUOT; imageB" style =" z-index：5">< / div> < br>< span id =" xx">< / span> < / body> < / html> - Rob Hello.Is there a way to make an element ''transparent'' to mouse activity, such thatmouse events go to the underlying element? I have an absolutely-positionedimage element with transparency that partly overlaps another element. I wantmouse events on the overlapping image to go to the underlying element.Thanks,nf 解决方案Read here on how events work with the DOM.<URL:http://www.quirksmode.org/js/contents.html#events>Different browsers have different event models, however the behaviourthat you require is basically standard - or do you have a specificexample of an event not being passed to an ''underlying'' element?--RobThanks for the reply and the link to the informative website. UnfortunatelyI did not find what I needed, and perhaps my description of what I cravewasn''t clear.I have two images. One is a panorama wider than most browser windows, whichI have put into a DIV that has been styled to clip on the right side. Theimportant part of the image is at the left side, but I want to give theoption to view the whole image. So I set an onclick event for the DIV, whichtoggles the overflow property between "clip" and "auto". This way the imagecan be scrolled if required but has no ugly scroll bars if not. The problemis that there is a absolutely-positioned GIF image overlapping the bottom ofthe wide image. Most of this overlap is in the transparent part of the GIF,which presents two problems:1. When someone clicks in the transparent part of the GIF, it does nottrigger the event attached to the overlapped DIV.2. When the overflow property of the DIV is changed to "auto", a scrollbarappears at the bottom of the image. The scrollbar is overlapped by thetransparent GIF, and is therefor inaccessible in the transparent areas ofthe GIF.Problem #1 can be overcome by attaching an event to the overlapping GIF, butthat is messy as I must then determine if the cursor is over the DIV.So, my hope was that there was some way to deactivate the GIF to mouseevents, so that the handler for the overlapped DIV would get all eventswhere the GIF is overlapping. Otherwise it appears I''ll have to trap eventsfor the GIF, determine if they are over the DIV, then change the z-order ofthe DIV to bring it to the top so the scroll bar will be accessible.nfBelow is some code that does what you want. I copied a fair bit ofthe stuff from quirksmode.org posted by FredOz a few days ago. Itdetects the location of your clipping div, then sees if a clickhappens over it based on the location of the click.If it''s a hit, the div''s z-index is raised so you can get to thescroll bars. When the user clicks away from the image, it is loweredagain and the overflow set back to hidden (there is no ''clip'' unlessthat is a Microsoft invention).Careful with IE, clicks outside the div are not always in thedocument (IE''s page does not fill the window like other browsers do)so sometimes clicking outside the image does not lower it again.Just click over something.Uses getElementById without testing, but otherwise should be prettysolid. Lightly commented and tested in IE and Firefox.The images I used are the logos from Google (a.gif) and Yahoo(b.gif) - the Yahoo one has transperancy too.Make sure you specify all needed dimensions in px as IE has a habitof reporting things in whatever units they are set in (%, em, etc.)where as Firefox tends to always report px if appropriate.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title> Image Overlap </title><meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1"><style type="text/css">..container { border: 1px solid red;}</style><script type="text/javascript">// Remember if we''ve raised the div with the image or notvar raised = false;function doClick(e){e = e || window.event;var x = document.getElementById(''OuterDiv'');var xTLx, xTLy, xBRx, xBRy, msg;// Get location of clickvar eX = e.clientX + pXoffset();var eY = e.clientY + pYoffset();// Get bounding co-ords of imagexTLx = findPosX(x); // top left xxTLy = findPosY(x); // top left y// Add width & heightif (x.style && x.style.width) {xBRx = xTLx + +x.style.width.replace(/px/,'''');}if (x.style && x.style.height) {xBRy = xTLy + +x.style.height.replace(/px/,'''');}// Purely for showmsg = xTLx + '', '' + xTLy + ''<br>'' + xBRx + '', '' + xBRy;msg += ''<br>'' + e.clientX + '', '' + e.clientY;if ( eX > xTLx && eX < xBRx&& eY > xTLy && eY < xBRy) {if (!raised) {x.style.overflow = ''auto'';x.style.zIndex -= -100; // -ve converts z-index to numberraised = true;}msg += ''<br><b>HIT</b>''; // Just for show} else {if (raised) {x.style.overflow = ''hidden'';x.style.zIndex -= 100;raised = false;}msg += ''<br>miss''; // Just for show}// More for showmsg += ''<br>Raised: '' + raised + ''<br>z-index: ''+ x.style.zIndex;document.getElementById(''xx'').innerHTML = msg; // Just for show}// From quirksmode.orgfunction findPosX(obj) {var curleft = 0;if (obj.offsetParent) {while (obj.offsetParent) {curleft += obj.offsetLeftobj = obj.offsetParent;}} else if (obj.x) {curleft += obj.x;}return curleft;}// From quirksmode.orgfunction findPosY(obj) {var curtop = 0;if (obj.offsetParent) {while (obj.offsetParent) {curtop += obj.offsetTopobj = obj.offsetParent;}} else if (obj.y) {curtop += obj.y;}return curtop;}// From quirksmode.orgfunction pXoffset(){if (self.pageXOffset) { // all except Explorerreturn self.pageXOffset;} else if (document.documentElement&& document.documentElement.scrollTop) {// Explorer 6 Strictreturn document.documentElement.scrollLeft;} else if (document.body) { // all other Explorersreturn document.body.scrollLeft;}}// From quirksmode.orgfunction pYoffset(){if (self.pageYOffset) { // all except Explorerreturn self.pageYOffset;} else if (document.documentElement&& document.documentElement.scrollTop) {// Explorer 6 Strictreturn document.documentElement.scrollTop;} else if (document.body) { // all other Explorersreturn document.body.scrollTop;}}</script></head><body onclick="doClick(event)"><div class="container" id="OuterDiv" style="overflow: hidden; position: absolute; top: 50px; left: 100px;z-index: 1; width: 100px; height: 100px;"><img src="a.gif" name="imageA"></div><div class="container" style="position: absolute; top: 100px; left: 100px; z-index: 5;"<img src="b.gif" name="imageB" style="z-index: 5"></div><br><span id="xx"></span></body></html>--Rob 这篇关于点击底层元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
