在 Google Chrome 和其他 WebKit 浏览器中单击事件处理程序很慢

Question

使用 jQuery UI 创建一个替代的可选对象，显示为具有超过三千个元素的层次结构。

基本上，使用 jQuery 1.6.1，除了来自 jQuery UI 的 CSS

<style type="text/css">
    .selectable,
    .selectable li
    {
        moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }
</style>
<script type="text/javascript">
    $(function () {
       $('.seletable li').click(function () { alert('hullo') });
    });
</script>

在体内

<ol class="seletable">
  <li style="margin-left: {calculated according to the current level in hierarchy}">...</li>
  ...
</ol>

有序列表当然会有 3k + 列表元素。

在加载页面并单击和元素时，警告框在 Google Chrome 和其他 WebKit 浏览器（如 Safari）中似乎显着延迟一到两秒，但在其他浏览器（如 IE、Firefox 和 Opera）中正常运行。

Answer 1

您是否将.click() 事件提供给同一个<ol> 中的3000 多个元素？

我希望不是这样，因为您可以只给<ol> 一个点击事件，然后停下来，查找每次生成事件的人。如果你这样做了，那也可能是放缓的原因。特别是在 IE 中，许多事件侦听器都被杀死了。

有点像

$( '<ol>' ).click( function(e) {

    // Here, e.target gives you the real element who was clicked

});