jQuery/JavaScript : IE 호버는 선택 상자 옵션을 다루지 않습니까?

StackOverflow https://stackoverflow.com/questions/206997

  •  03-07-2019
  •  | 
  •  

문제

마우스 오버의 텍스트 상자를 넓히고 마우스 오프에서 단축하기 위해이 스크립트가 있습니다.

내가 가진 문제는 Internet Explorer가 선택 상자의 옵션을 통해 마우스를 확장하지 않는 것 같습니다.

즉, 즉, 선택을 클릭하고 옵션을 드롭 다운하게 할 수 있지만 선택을 선택하려고하면 선택 상자 자체에서 이동하자마자 선택 상자가 사라지고 선택 상자가 다시 크기를 재조정합니다.

예제 코드 :

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

그리고:

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

IE의 일부 상자에 대한 해결 방법이 있습니까? 누군가가 실제로 신뢰할 수있는 것을 추천 할 수 있다면 jQuery 교체를 고려할 것입니다.

감사!

도움이 되었습니까?

해결책

분명히 IE는 선택 요소의 드롭 다운 비트 부분을 고려하지 않습니다. 가능하지만 Expando 속성으로 약간의 부정 행위가 필요하고 Blur/Focus 이벤트가 필요합니다. 마우스가 요소의 드롭 다운 부분에 들어갈 때 '숨기기'효과를 활성화하고 비활성화 할 수 있습니다.

이것과 함께 가십시오 :

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

(이것이 jQuery를 사용하는 방법이 아니라면 사과합니다 - 전에는 사용한 적이 없습니다 :))

다른 팁

이 게시물이 잠시 동안 올라간 것 같습니다. 그러나 여전히 해결 방법에 관심이있는 사람들이 있기를 바랍니다. 내가 작업중 인 새로운 사이트를 구축 하면서이 문제를 경험했습니다. 그것은 제품 슬라이더가 있으며, 각 제품마다 제품에 대한 마우스는 제품에 대한 정보, 구매 옵션을 선택하기위한 드롭 다운 및 구매 버튼으로 큰 정보 버블을 나타냅니다. 마우스가 선택 메뉴의 초기 가시 영역을 떠날 때마다 (예 : 옵션을 선택하려고 시도) 전체 거품이 사라질 것임을 빨리 발견했습니다.

대답 (jQuery를 개발 한 똑똑한 사람들)은 이벤트 버블 링에 관한 것이 었습니다. 문제를 해결하는 가장 간단한 방법은 일시적으로 호버의 외부 상태를 "비활성화"해야한다는 것을 알고있었습니다. 다행스럽게도 JQuery는 이벤트 버블 링을 다루기위한 기능을 갖추고 있습니다 (전파라고 함).

기본적으로, 새로운 코드의 줄 정도만 있으면 드롭 다운의 "OnMouseleave"이벤트에 메소드를 첨부했습니다 (선택 목록의 옵션 중 하나에 대한 마우스는이 이벤트를 안정적으로 트리거하는 것 같습니다. 다른 몇 가지 이벤트를 시도했습니다. 그러나 이것은 이벤트 전파를 끄는 (예 : 부모 요소는 드롭 다운의 "onmouseleave"이벤트에 대해들을 수 없었습니다).

그거였다! 솔루션은 내가 기대했을 때 훨씬 더 우아했습니다. 그런 다음 마우스가 거품을 떠나면 호버의 외부 상태가 정상적으로 트리거되고 사이트는 사업에 대해 계속됩니다. 다음은 수정 사항입니다 (문서에 넣었습니다. 준비) :

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});

Worldwideweb의 답변은 완벽하게 작동했습니다.

약간 다른 문제가 있었는데, 양식 필드의 포함 항목 (선택 메뉴를 공개하기 위해 호버)에 호버 효과가 있었고 IE 사용자는 드롭 다운에서 선택할 수 없었습니다 (값을 계속 재설정). 나는 WorldwideWeb의 제안 (Select의 ID와 함께)과 Viola를 추가했습니다.

내가 한 일은 다음과 같습니다.

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});

나는 호버를 기반으로 숨겨진/보여준 형태를 가지고있었습니다. 사용자가 선택에 초점을 맞추면 양식이 숨겨져 있습니다. 나는 다음과 같이 내 문제를 해결할 수있었습니다.

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});

같은 문제가 있었고 WorldwideWebb의 답변은 IE8에서 매우 잘 작동했습니다. 선택기에 Select Box의 클래스를 포함시키기 때문에 선택기에서 "Select"를 제거하면서 약간 변경했습니다. 정말 간단한 수정으로 만들었습니다.

또한 Hoverintent JQuery 플러그인을 사용하는 메뉴에서 문제없이 구현했습니다. (간섭 없음).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top