jQuery stopPropagation이 앵커 내부의 텍스트 상자에 적용될 때 작동하지 않습니다

Question

당신이 나를 도울 수 있기를 바랍니다. 사용자가 텍스트 상자를 클릭하면 페이지가 "error.htm"에 리디렉션,

<a href="error.htm" class="button" id="_uiStart" style="-moz-border-radius: 4px 4px 4px 4px;"> 
<span>Start</span> 
<input type="text" id="_uiCode"> 
</a> 

Normaly :이 같은 HTML 태그가 있습니다.

$(document).ready(function() { 
    var mute = function(event){   
     event.stopPropagation(); 
    };  
    $('a.button input').click(mute) 
    .mousedown(mute) 
    .mouseup(mute); 
} 

그러나이 작동하지 않는, 클릭이 여전히 앵커에 의해 처리됩니다 및 "error.htm"로 리디렉션 : 나는 내가 사용 그래서 jQuery를가 취소 것을 방지하고 싶었다.

도와주세요. 감사합니다. omittones의 발언 후 편집

Answer 1

반환 거짓 대신 (working fiddle)

stopPropagation이 기본 동작하지 만 이벤트 핸들러입니다.

preventDefault 원하는대로 처리하지만 false를 반환하면 둘 다 트리거됩니다.

업데이트 된 바이올린 :

가 반환하기 전에 $(this).focus()을 추가하고 당신은 황금해야합니다. 그러나 나는 당신이 당신의 html을 설정하는 또 다른 방법을 살펴볼 것을 제안 할 것이다. 그래서 <a>은 처음부터 입력을 감싸지 않는다.

Answer 2

:

일어나는에서 정상 이벤트를 방지 할 수

$('a.button input').click(function() { $(this).focus(); return false;});

이 일을하지 왜. event.stopImmediatePropagation (Propagation을 중지하는 방법을 알고있는 한) 이벤트가 코드 계층 구조를 통해 버블 링되는 것을 방지합니다. 이 방법이 모든 브라우저에서 작동하지 않는 경우 두 가지를 모두 수행하십시오.

$('a.button input').click(function() { 
    $(this).focus(); // added this line after editing 
    e.stopImmediatePropagation(); 
    return false; 
});