有没有办法来强制溢出内容点击射击click事件

我试图解决的主要问题：能有下拉选项宽度小于其中显示所选值的区域较大，特别是在IE7 。谷歌搜索了一段时间后，我决定尝试写我自己的，给我更多的风格。有没有办法来强制溢出内容点击射击click事件

我所做的是使用输入文本框，显示选定的值。输入的宽度是从其父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/

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

来源

2012-01-16 user1151186

我不这么认为这是可能的。 – ShankarSangoli 2012-01-16 04:30:41

你应该模拟你想要做什么并上传一个jpg。你的描述很混乱。还请包含一些示例代码。你在谈论FORM中的SELECT元素吗？ – 2012-01-16 05:06:44

无序列表，使其成为父div的兄弟输入字段，并给它适当的高度和宽度。如果你可以把你的代码JSfiddle，这将是更多的帮助。 – 2012-01-16 05:06:50

我不知道你是否可以避免，但是当你点击你可以计算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*/ 
    } 
    });

好运

问候

来源

2012-01-17 02:21:42 MCSI

有没有办法来强制溢出内容点击射击click事件

回答

相关问题