요소가 비활성화된 경우 마우스 오버 이벤트 발생

요소가 비활성화된 경우 마우스 오버 이벤트 발생

사용자에게 편집 권한이 없지만 선택한 옵션 요소의 전체 텍스트를 표시할 수 있을 정도로 넓지 않은 경우 비활성화해야 하는 몇 가지 컨트롤이 있습니다.이 경우 ASP로 툴 팁을 추가했습니다.NET 및 다음 코드

ddl.Attributes.Add("onmouseover", "this.title=this.options[this.selectedIndex].title")

이것은 컨트롤이 활성화된 경우에는 작동하지만 비활성화된 경우에는 작동하지 않습니다.

마우스가 선택 요소 위에 있을 때 다음 경고가 실행되지 않습니다.

<select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
</select>

이 바이올린을 보세요.

Q: 다음과 같은 컨트롤에 대해 이벤트를 실행할 수 있습니까?

비활성화된 요소는 이벤트를 발생시키지 않습니다. 예를 들어 사용자는 팝업(또는 도구 설명)을 트리거하기 위해 해당 요소를 마우스로 가리키거나 클릭할 수 없습니다.그러나 사용하지 않도록 설정된 요소를 다음과 같이 래핑할 수 있습니다.DIV대신 해당 요소에서 발생한 이벤트를 청취합니다.

업데이트: 이 접근 방식에 대한 몇 가지 심각한 제한 사항은 Nathan William의 의견을 참조하십시오.저는 문제 영역을 더 명확하게 설명하기 위해 바이올린을 업데이트했습니다.

---

@Diodeus가 말한 것을 확장하면 jQuery를 사용하여 자동으로 생성할 수 있습니다.div사용자를 위한 용기와 비활성화된 요소를 감싸줍니다.

1. 선택기를 사용하여 비활성화된 모든 요소를 찾습니다.
2. 그런 다음 함수 콜백으로 메소드를 호출합니다.
3. 를 사용하여 세트의 현재 요소를 참조할 수 있습니다.
4. 그런 다음 방법을 사용하여 다음을 얻습니다.onmouseover상위 요소의 값을 입력하고 새 div에 동일한 값을 적용합니다.

$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

jsFiddle 데모

이것이 오래된 게시물이라는 것을 알지만, 이 대답이 어떻게 하는지 분명히 해주길 바랍니다.@Diodeus답변을 구현할 수 있습니다!

비활성화된 요소는 이벤트를 발생시키지 않습니다. 예를 들어 사용자는 팝업(또는 도구 설명)을 트리거하기 위해 해당 요소를 마우스로 가리키거나 클릭할 수 없습니다.해결 방법으로 다음을 수행할 수 있습니다.<DIV>또는<span>비활성화된 요소 주위에서 대신 해당 요소에서 발생한 이벤트를 청취합니다.

참고! 사용onmouseover그리고.onmouseout포장지에.<DIV>Chrome(v69)에서 예상대로 작동하지 않습니다.하지만 IE에서는 작동할 것입니다.그렇기 때문에 사용자들에게 사용할 것을 권장합니다.onmouseenter그리고.onmouseleave대신에, 이것은 IE와 Chrome 모두에서 잘 작동합니다.

   <select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
  </select>

  <div onmouseenter="alert('hi');">
    <select disabled="disabled" onmouseover="alert('hi');">
      <option>Disabled with wrapper</option>
    </select>
  </div>

여기에 몇 가지 예를 들어 JS 바이올린을 조립했습니다. http://jsfiddle.net/Dr4co/tg6134ju/

대상 요소에 제목을 추가할 수 없는 이유는 무엇입니까? 제목은 도구 설명과 같습니다.그리고 제목은 장애인 요소에 작용합니다.

선택한 값을 설정할 때 제목도 설정합니다.

element.value=value;
element.title = element.options[element.selectedIndex].text;

이것이 오래된 게시물인 것은 알지만 크롬에서 당신은 css 속성 포인터 이벤트를 모두로 설정할 수 있고 이벤트를 허용해야 합니다.나는 다른 브라우저를 확인하지 않았습니다.

button[disabled] {
  pointer-events: all;
}

편집:

사실 속성을 auto로 설정하면 충분하다고 생각합니다.@KyleMit가 언급했듯이, 그것은 꽤 좋습니다.

프로젝트에서 일부 유효성 검사 규칙이 충족될 때까지 버튼을 비활성화해야 하는 경우에만 사용했습니다. 또한 버튼 위에 마우스를 놓으면 유효성 검사를 트리거해야 했습니다.그래서 포인터 이벤트를 추가하면 효과가 있었습니다.OP에 명시된 문제를 해결하는 가장 쉬운 방법이라고 생각합니다.

이에 대한 두 가지 해결책이 있습니다.

<Tooltip title="Tooltip" placement="bottom">
          <div>
            <IconButton disabled>
              <Done />
            </IconButton>
          </div>
        </Tooltip>

또는 당신이 경치를 놓치고 싶지 않다면 이것.

<Tooltip title="Tooltip" placement="bottom">
  <IconButton component="div" disabled>
    <Done />
  </IconButton>
</Tooltip>

언급

언급URL : https://stackoverflow.com/questions/18113937/fire-onmouseover-event-when-element-is-disabled