为什么要检查preventDefault，然后再preventDefault？

Question

我正在尝试使用这个网站的颜色滑块，并且这是源代码。以下代码第134行是做什么的？

if (e.preventDefault) e.preventDefault();

我知道preventDefault()的作用，但为什么要检查preventDefault()然后再检查preventDefault呢？为什需要使用preventDefault()？

此外，在这之前的那一行代码检查了什么：

if (target !== this)

这有什么必要呢？

- Horay

---

由于不是所有的引擎都支持它，因此请仅返回翻译后的文本。 - epascarello

据推测，这是为了防止在不支持它的旧版IE中抛出错误。 - Josh Crozier

如果我没记错的话，旧版IE使用window.event.returnValue = false。 - Oriol

preventDefault正在阻止滑块上的MouseDown事件，对吗？但是mouseDown确实起作用。如果它不起作用，颜色就不会改变，对吧？ - Horay

Answer 1

仅仅是为了跨浏览器兼容性。IE 8或更早版本不支持preventDefault，它们使用returnValue。

//check preventDefault function is exists in event handler 'e'
if (e.preventDefault)

    // if browser support preventDefault, call preventDefault();
    e.preventDefault();

编辑：

if (target !== this)

在这段代码中，target 是被点击的对象，可以指向 div#sliders 和 div#silders 的子元素（R、G、B、H、S、L 滑块），而 this 指向 div#sliders。

所以这段代码的意思是，“如果被点击的对象不是 div#sliders，则 RGB、HSL 滑块能够正常工作”。

编辑2：

e.preventDefault() 存在是为了让滑块移动（拖动）更加完美。

例如，如果光标在你拖动时离开了滑块，并且没有 e.preventDefault()，则该函数将无法正常工作。

- blurfx

---

如果你能在我得到答案之前回答@mikryz评论中我写的最后两个问题，我会接受你的答案。 - Horay

谢谢！关于我提到的preventDefault的另一个问题呢？他写道：“这是针对那些小滴答器的点击。”“小滴答器”指的是什么？ - Horay

@Horay 检查编辑2。我希望你能理解我的糟糕英语。 - blurfx

当然我能理解！ :) 我尝试了一下没有使用 preventDefault()，它工作得很好。 - Horay

@Horay 是的，通常情况下它会正常工作。但是当 preventDefault() 不存在时，就可能会出现 这个问题。 - blurfx

哦，我明白了。谢谢！ - Horay

Answer 2

跨浏览器支持，特别是旧版本的IE。它需要在调用函数之前检查函数是否存在，以防止错误。

- Pabs123

---

如果你能在我得到答案之前回答@mikryz评论中我写的最后两个问题，我会接受你的答案。 - Horay

Answer 3

在 if 语句中没有括号。因此，这不是一个函数调用，而只是检查是否存在这样的方法。因此，他们只是检查方法是否存在，如果存在，则调用它。

至于目标，他们检查哪个元素首先获得了此事件。如果是当前滑块，则忽略该事件。

- mikryz

---

谢谢您提供如此详尽的答案！它是防止哪个事件发生？ - Horay

滑块上的MouseDown - mikryz

但是 mouseDown 确实起作用了。如果它不起作用，颜色就不会改变，对吧？ - Horay

我猜这是为了点击那些指向当前颜色选择的小标记。 - mikryz

你是指 'R'、'G'、'B' 标签吗？ - Horay

另外，关于 target，你写道：“如果是当前滑块，则忽略该事件。” 这是否意味着函数将再次触发，并且当前滑块是 event.target？ - Horay