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

【问题标题】：Is there a way to force clicks on overflow content to fire a click event有没有办法强制点击溢出内容来触发点击事件
【发布时间】：2012-01-16 04:22:53
【问题描述】：

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

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

我遇到的问题是，在超出父 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/

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

【问题讨论】：

我认为不可能。
您应该模拟您正在尝试做的事情并上传 jpg。你的描述很混乱。还请包括一些示例代码。您是在谈论 FORM 中的 SELECT 元素吗？
无序列表，使其成为父 div 的兄弟输入字段并为其提供适当的高度和宽度。如果你能把你的 JSfiddle 的代码放上去，那就更有帮助了。
这是我第一次发布问题，因为我的声誉太低，我无法发布图片。
您能否展示一个示例，例如在 jsfiddle 中，以便我们更好地了解正在发生的事情？

标签： jquery html css

【解决方案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*/
    }
   });

祝你好运

问候

【讨论】：