通过重叠项目管理Click事件(Manage Click events through overlapping items)

我在幻灯片组件中遇到了javascript重叠问题。我想添加一个图标来删除幻灯片中的图片，此图标位于每张图片的右上角。

问题是：图标（和他的点击事件）位于一个大的空白div下（截图中为蓝色）。这个div用于转到下一张图片。

是否有解决方案来触发图标事件并阻止幻灯片事件？

I got a javascript overlapping problem in a slideshow component. I want to add a icon to delete a picture in the slideshow, this icon is on the right top corner of each picture.

The problem is : The icon (and his click event) is under a big blank div (in blue on the screenshot). This div is used to go to the next picture.

Is there a solution to fire the icon event & block the slideshow event?

最满意答案

这是干净的代码

<html> <head> <style> #slideshowController1 { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; z-index: 98; border: 1px solid blue; } #slideshowController2 { position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 98; border: 1px solid green; } #pic1 { height: 400px; width: 400px; border: 1px solid red; } #delete1 { float: right; width: 24px; height: 24px; margin-top: 0px; background-color: black; } .swipe { overflow: hidden; visibility: hidden; position: relative; width: 100%; max-width: 500px; margin: 0 auto; text-align: center; } .swipe-wrap { overflow: hidden; position: relative; } #slideShow { position: relative; overflow: hidden; margin-top: 20px; } </style> </head> <body> <div id="slideShow"> <div id="slideshowController1" class="slideshowController" onclick="alert('right');"> </div> <div id="slideshowController2" class="slideshowController" onclick="alert('left');"> </div> <div id="mySwipe" class="swipe" style="visibility: visible;"> <div class="swipe-wrap" id="swipe-gallery" style="width: 2500px;"> <div id="pic1"> <div id="delete1" class="thumbDelete" style="z-index: 100;" onclick="alert('delete');"> <img src="../../img/delete.png" width="100%"> </div> </div> </div> </div> </div> </div> </body> </html>

如果我把z-index：100放在mySwipe上，它的工作只是在图片的一侧......它是一个部分解决方案！

但这不是理想的操作，只有图标必须结束......

有任何想法吗？

Here is the clean code

<html> <head> <style> #slideshowController1 { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; z-index: 98; border: 1px solid blue; } #slideshowController2 { position: absolute; left: 0; top: 0; width: 50%; height: 100%; z-index: 98; border: 1px solid green; } #pic1 { height: 400px; width: 400px; border: 1px solid red; } #delete1 { float: right; width: 24px; height: 24px; margin-top: 0px; background-color: black; } .swipe { overflow: hidden; visibility: hidden; position: relative; width: 100%; max-width: 500px; margin: 0 auto; text-align: center; } .swipe-wrap { overflow: hidden; position: relative; } #slideShow { position: relative; overflow: hidden; margin-top: 20px; } </style> </head> <body> <div id="slideShow"> <div id="slideshowController1" class="slideshowController" onclick="alert('right');"> </div> <div id="slideshowController2" class="slideshowController" onclick="alert('left');"> </div> <div id="mySwipe" class="swipe" style="visibility: visible;"> <div class="swipe-wrap" id="swipe-gallery" style="width: 2500px;"> <div id="pic1"> <div id="delete1" class="thumbDelete" style="z-index: 100;" onclick="alert('delete');"> <img src="../../img/delete.png" width="100%"> </div> </div> </div> </div> </div> </div> </body> </html>

if I put z-index:100 on mySwipe, it's work but only out side of the picture... its a partial solution !

But this is not the desired operation, only the icon must be over...

Any ideas ?

更多推荐