jquery - 有没有办法强制点击溢出内容来触发点击事件

Question

我试图解决的主要问题:能够使下拉选项的宽度大于显示所选值的区域，特别是在 IE7 中。在谷歌上搜索了一段时间后，我决定尝试编写自己的代码，让我有更多的能力来设计它。

我所做的是使用输入文本框来显示所选值。输入的宽度继承自其父 div。然后我动态构建下拉选项的无序列表。为了让选项超出包含的 div 的宽度，我使用了负边距和 overflow-x: visible。

我遇到的问题是，在超出父 div 宽度的每个下拉选项区域中，点击和滚动不受尊重。有没有办法让它发挥作用？

以防万一，我使用 jQuery 来处理事件。我在 ul 元素上为每个 li 元素设置了一个委托(delegate)点击处理程序。

静态 html:

<div id="dropDownDiv" style="width: 155px;">
  <input type="text" />
</div>

<script>
    $(createDropDown("dropDownDiv")):
</script>

创建下拉菜单的函数:

function creatDropDown(inputId) {
  var fragment = $(document.createElement('ul')),
      countryList = ${countriesJS};

  for(var i = countryList.length-1; i >= 0; i=i-1) {
    $("<li code='" + countryList[i][1] + "'>" + countryList[i][0] + "</li>").prependTo(fragment);
  }

  fragment.addClass("hidden menuOptions");
  $(inputId).append(fragment);
  $(inputId).on("click", function(e) {fragment.removeClass("hidden");});
  fragment.on("click", "li", handler);
}

这是一个 jsFiddle。我的示例实际上在 jsFiddle 中有效，但在 iE7 中无效。 http://jsfiddle.net/rpmc22/vAP56/

这是一个速写。基本上发生在红线右侧的任何点击都不会触发点击事件。

Answer 1

我不知道你是否可以避免，但是当你点击时你可以计算 div 的尺寸，如果在里面你就做你想做的，如果没有，什么也不会发生。

这是一个可以帮助您的链接:Mouse Position

$("#element").click(function(e){

    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

    if(x < XX && y < YY) {
        /*do you code*/
    }
    else {
        /*nothing*/
    }
   });

祝你好运

问候