Chrome/WebKit/Safari에서 앵커 비활성화
-
05-07-2019 - |
문제
다음 코드를 고려해보세요.
$("a").attr("disabled", "disabled");
IE 및 FF에서는 앵커를 클릭할 수 없게 되지만 WebKit 기반 브라우저(Google Chrome 및 Safari)에서는 아무 작업도 수행하지 않습니다.비활성화된 속성의 좋은 점은 쉽게 제거할 수 있고 href 및 onclick 속성에 영향을 주지 않는다는 것입니다.
원하는 결과를 얻는 방법에 대한 제안 사항이 있습니까?답변은 다음과 같아야 합니다.
- AJAX 호출이 실행되는 동안 양식 입력 컨트롤을 비활성화하고 싶기 때문에 쉽게 되돌릴 수 있습니다.
- IE, FF 및 WebKit에서 작동해야 함
해결책
이러한 앵커 요소에 바인딩된 onclick 이벤트 핸들러가 있다고 가정합니다.이벤트 핸들러에서 "disabled" 속성을 확인하고 해당 속성이 설정된 경우 이벤트를 취소하도록 하세요.이벤트 핸들러는 다음과 같습니다.
$("a").click(function(event){
if (this.disabled) {
event.preventDefault();
} else {
// make your AJAX call or whatever else you want
}
});
스타일시트 규칙을 설정하여 커서를 변경할 수도 있습니다.
a[disabled=disabled] { cursor: wait; }
편집 - 의견에 제안된 대로 "비활성화" 확인을 단순화했습니다.
다른 팁
다른 조건 등에 따라 이 속성을 활성화/비활성화하는 앵커가 많은 사이트에서 이 동작을 수정해야 했습니다.이상적이지는 않을 수도 있지만 이와 같은 상황에서 각 앵커의 코드를 개별적으로 수정하지 않으려는 경우 모든 앵커에 대해 다음과 같은 방법을 사용하면 됩니다.
$('a').each(function () {
$(this).click(function (e) {
if ($(this).attr('disabled')) {
e.preventDefault();
e.stopImmediatePropagation();
}
});
var events = $._data ? $._data(this, 'events') : $(this).data('events');
events.click.splice(0, 0, events.click.pop());
});
그리고:
a[disabled] {
color: gray;
text-decoration: none;
}
제휴하지 않습니다 StackOverflow