クリックイベントを発生させるオーバーフローコンテンツのクリックを強制的に行う方法はありますか？

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

幸運

挨拶