Question

看一下这些HTML片段：Jsfiddle

<style>
  div { 
    margin:20px; 
    border: 30px red solid; 
    padding: 20px; 
    background-color:green;
    overflow-y:scroll; 
  }
</style>

<div onclick="alert('div clicked');">click me</div>

现在，如果用户点击Firefox或Chrome中的滚动条，则div元素上的点击处理程序不会被触发。另一方面，在IE中，点击处理程序会触发。

哪种行为是正确的？是否在任何地方定义了预期的行为？

Answer 1

w3 recommendations建议滚动条应放在元素的内边框边缘和外边框填充边缘之间。此外，滚动条的尺寸应从元素的尺寸中减去。

长话短说，滚动条不应该在元素内部。并且应适当调整元素的高度/宽度。

Answer 2

我认为这两种行为都可以。当滚动条位于文档（即safari）上时，它应触发单击事件，而滚动条不是它不应该。（chrome，firefox）。

我推荐＆＃39;不要弄乱（试图处理这种行为），只需点击滚动条，但滚动事件或点击它是否在文档上。

我非常肯定使用移动浏览器如果您尝试猜测这将是一个很大的故事。会发生什么。

Answer 3

如果按字面意思考虑，滚动条实际上不是页面的一部分，而是导航该页面的方式，因此除非有人使用onscroll效果，否则不应该直接干扰页面本身。如果滚动条覆盖元素的一部分，则以太网页面为宽，或者浏览器不会补偿滚动条的添加宽度。我认为在这种情况下，Firefox和Chrome是“正确的”，但IE不一定是错的，他们只是采用不同的方式实现滚动。

我想另一个问题是“如果页面宽度为100％，浏览器会显示滚动条后面元素的一部分吗？”如果是这样，那么元素应该可以在栏中点击。

希望这是有道理的：）

Answer 4

根据W3，点击事件是冒泡事件。

这是什么意思？ Here解释说：

<强>鼓泡在事件的目标处理之后事件通过其祖先向上传播的过程。

现在，关于滚动条，这里的问题是要了解它们是否应该：

停止点击事件传播，或
让它冒泡到一个更合适的处理程序（在这种情况下是div 元素），或
回应此事件并将其冒出来以便祖先要抓住它。

现在，在same W3 page中解释了滚动事件是什么：

<强>滚动滚动文档视图时会发生滚动事件。

现在您对滚动条的期望是处理文档视图的滚动（在本例中为div），而不会干扰它的正确和预期行为（包括事件传播）。

这里真正的问题是，当鼠标上的滚动仍然是想象力时，为了滚动你必须先点击！因此，在这个容量中，我们可以说行为编号1和编号3都是正确的（第一个优先考虑滚动条，而第二个考虑滚动条和祖先）。

所有这一切都说：目前没有明确的标准。浏览器创建者可以决定采用一种行为或另一种行为，它们都是正确的。

在这种情况下，为了在浏览器之间获得同质行为，您可以做的是，例如，catch the clicks on the scrollbars（对于Firefox和Chrome）并触发div的点击事件。

Answer 5

这里有一个更大的问题，在整个webapp开发过程中传播：实际上并没有标准;只是建议。 W3C在统一网络方面是最响亮的声音，但他们所能提供的只是建议，因为微软和较小的网络浏览器开发人员不属于委员会。

所以简短的回答是：既没有正确也没有错误，因为没有公认的标准

很久以前，微软做出了一个与Netscape（当时唯一的其他浏览器）相悖的决定，这与其他浏览器现在正在做的与你的问题有关的决定：

Microsoft决定在元素的边界框中包含/绘制与元素有关的所有内容（包括边框，填充，边距（？），滚动条等）。这意味着在元素中点击任何内容都会引发一个onclick事件，无论点击什么，因为它在边界框内。

W3C建议只包括填充和显示区域，使边框，边距，滚动条等在其外部呈现，这反过来意味着只有当提取的填充和/或显示区域时点击一个元素

单击滚动条时是否应运行单击处理程序

5 个答案: