相关疑难解决方法(0)

所以,我打算为我的网站制作一个重叠的东西,其中一个元素固定在网站上并置于一切之上.但这意味着元素背后的其他任何东西都不会受到影响.

这是一个重现这个问题的JSFiddle.

您会注意到您无法突出显示黑色文本,并且JavaScript事件不会触发.

这是我用来创建这个问题的CSS + HTML:

HTML

<div id="main-container">
    <div id="container-content">You can't highlight me! D:</div>
    <div id="container-fixed"><div style="margin:90px auto;background:red;width:40px;height:40px;"></div>You cannot highlight the text behind this DIV.  It also doesn't fire click events.</div>
</div>

main-container:这包含内容.

container-content:这是固定DIV背后的内容

container-fixed:这是重叠"容器内容"的DIV

CSS

#main-container {
    width: 90%;
    margin: 5%;
    position: relative;
    height: 500px;
    overflow: auto;
}

#container-content {
    width: 100%;
    height: auto;
}

#container-fixed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

我正在努力实现的目标是什么？CSS和JavaScript(jQuery)答案都是允许的.

我有一堆divs绝对相互搭配.当我将click事件绑定到所有这些事件时,只有顶部div响应.如何将事件发送到光标下的所有div？

我在基于Sencha Touch 2的移动应用程序中设计了类似于按钮的普通链接,而且我遇到的问题是大多数链接在iPhone上的Safari中无法正常工作.

该链接是一个普通<a>标签,内部<span>元素包含标签文本.<a>元素上有填充,允许注册点击.似乎内部<span>阻止了点击在父锚中作为链接点击注册,其背景是透明的.

这是标记:

<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
    <span class="x-button-label">View profile on full site</span>
</a>

在Chrome中进行测试不会出现任何问题,即单击跨度会导致遵循父超链接.两者都是基于Webkit的浏览器.我们的一位测试人员也在Safari上用Macbook测试了这一点,没有任何问题; 我还使用Wacom Bamboo平板电脑在Chrome中对此进行了测试,没有任何问题.这只是移动设备上的一个问题(在iPhone和Android 2.2上都经过测试) - 这就是我们的目标.

我可以在<span>元素上设置一个CSS属性,以允许点击通过父超链接吗？理想情况下,我希望避免通过JavaScript设置事件.关于为什么这不符合我的预期的任何想法？

更新:以下是Chrome开发者控制台报告的内部范围样式:

-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: …

我能在SO上尝试做的最接近的事情就是这样,但听起来这不再是一个可行的解决方案而且它不是特定于iFrames: 点击DIV到底层元素

基本上我有一个DIV被添加到包含iFrame的页面.iFrame内容可以最小化,因此它们并不总是占用iFrame的所有空间.iFrame是透明的,因此您仍然可以看到它背后的网页.我需要能够点击它背后的网页中的元素,但到目前为止还没有运气.

它们有大约400x400的iFrame,但当其中的内容最小化时,您仍然可以点击它背后的网页.我尝试过类似的东西,却无法让它发挥作用.

即使在透明区域,我也无法点击它背后的页面.我也尝试过使用指针事件:无其他帖子中提到但没有帮助.它只会禁用iFrame中的元素,但不会影响单击它.

有谁知道如何实现这一目标？有一种更大的iFrame的方法,其中的内容可以最小化,你仍然可以点击iFrame背后的内容？

更新: 使用框架时似乎无法做到这一点.

看看这个:http:
//www.templatemonster.com/demo/35403.html

在此模板中,您可以单击男性前臂下方的图像,甚至可以单击前臂本身.
手不是图像的一部分.这是三div件作为背景的png图像.

这怎么可能？
我该怎么做同样的事情(有一个包含链接的图像的股利和有它内部的div但是底层的链接可以点击的)？
它是跨浏览器吗？

谢谢

我的目标是拥有一个允许的元素:

1. 下面的元素被点击/与之交互,
2. 滚动

众所周知,1的解决方案是pointer-events: none.这是在点击DIV到底层元素中所描述的.

但是,元素无法滚动,因为滚动条出现在元素上pointer-events: none.这可以在这个例子中看到:http://jsbin.com/madure/2/edit？html,css,output.

是否有解决方法,或者是否需要在浏览器级别解决？也许有一个额外的规则,pointer-events: scrollOnly.

正如我在这里看到的,可以使用过滤器来模拟跨浏览器版本

pointer-events: none;

但是,这在IE9中不起作用,也不在IE9中的"模拟IE8"版本中.但是,IE8的本机安装可以很好地处理它.是否有任何解决方案使其适用于IE9？

我正在尝试检测部分重叠的SVG元素上的mousemove事件,如此图像中所示

小提琴

<svg>
    <rect id="red"    x=10 y=10 width=60 height=60 style="fill:#ff0000" />
    <rect id="orange" x=80 y=10 width=60 height=60 style="fill:#ffcc00" />
    <rect id="blue"   x=50 y=30 width=60 height=60 style="fill:#0000ff; fill-opacity: 0.8" />
</svg>

$('rect').on('mousemove', function()
{
    log(this.id);
});

现在,当鼠标悬停在蓝色/红色交叉点上时,我想检测这两个元素上的鼠标事件,蓝色/橙色组合则相同.正如您在日志中看到的那样,在这些情况下,事件当前仅针对蓝色框触发,因为它位于顶部.

这与指针事件有关,因为我可以通过将蓝色元素的指针事件设置为无,在悬停蓝色元素时获取红色和橙色元素来触发事件.但后来我没有得到蓝盒的事件,所以这也不是一个可行的选择.

我将使用哪个库解决这个问题.我在这个d3示例中查看了事件冒泡,但这仅适用于嵌套在DOM中的元素.我有很多可能与许多其他元素重叠的独立元素,因此无法以这种方式构建我的DOM.

我猜最后的办法是找到当前鼠标位置的元素,并手动触发事件.因此,我查看了document.elementFromPoint(),但这只会产生1个元素(并且在SVG中可能不起作用？).我发现jQuerypp功能中,即发现在给定位置的元素,见这里.这个例子看起来很棒,除了它是DIV而不是SVG内部.当用svg矩形元素替换div时,小提琴似乎破了.

我该怎么办？!

我正在使用svg元素创建图表.我正在向他们应用事件处理程序.事件按预期工作,但我有一个问题,因为有时其中一个元素直接在另一个元素之上,所以当底部元素的事件应该被触发时,它不会.如果你看下面的图片,我有rect一个zoom事件.变焦event会在mouse-wheel发生时触发rect,但当圆圈覆盖它时,不会触发事件.我必须拥有它circles,rect以便在需要时可以点击它们.我怎么可能解决这个问题.我尝试在这里搜索解决方案SO,但找不到任何特定于此问题的内容.

我有一个显示圈子的JSFiddle.如果您在圆圈之外的任何位置进行缩放,则会触发缩放行为,但如果您尝试在圆圈顶部进行缩放,则缩放行为将不起作用.

我需要制作一个 div，以便当光标悬停在它上面时我可以检测到它（使用 javascript），但我想制作一个 div，以便您可以单击 div 到下面的元素。有没有办法做到这一点？

谢谢