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

Question

我想解决的主要问题：能够使下拉选项宽度大于显示所选值的区域，特别是在IE7中。谷歌搜索了一段时间后，我决定尝试自己编写，以便给我更多的风格。

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

我遇到问题的地方是在每个下拉选项的区域中不会遵循点击和滚动，这些选项超出了父div的宽度。有没有办法让这个工作？

如果重要，我正在使用jQuery来处理事件。我在每个li元素的ul元素上设置了一个委托的点击处理程序。

静态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*/
    }
   });

祝你好运

问候