자바 스크립트 이벤트가 텍스트 상자 워터 마크를 사용할 때 흔들리지 않는다

Question

텍스트 상자에 포커스가있을 때 사라지는 텍스트 상자에 간단한 워터 마크를 구현하려고합니다. 나는 위대한 일을 출연이 jQuery 플러그인을 발견 :

http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

워터 마크했다 그냥이 코드를 광고로 : 그러나

<script type="text/javascript" src="/includes/_jQuery/_Library/jquery-1.3.1.min.js"></script> 
<script type="text/javascript" src="/includes/_jQuery/_plugs/_hint/jquery.hint.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("input[title!=]").hint(); 
    }); 
</script> 

<table> 
    <tr> 
     <td><input type="text" title="Blah" /></td> 
    </tr> 
</table> 

, 테이블의 클릭 이벤트에 경고를 추가 할 때 , 나는 텍스트가있는 텍스트 상자의 부분을 클릭 할 때 이벤트가 튀지 않는다는 것을 알게되었습니다. 그러나 텍스트가없는 텍스트 상자의 부분을 클릭하면 잘 나타납니다. 여기에 내가 경고 만드는 데 사용되는 jQuery 코드입니다 :

 $("table").click(function() { 
      alert("blah"); 
     }); 

아무도 텍스트 상자의 부분을 클릭하면 이벤트가 버블 업을하지 않는 이유는 어떤 생각을 가지고 있습니까,하지만 다른하지?

Answer 1

은 아무도 텍스트 상자의 일부가

텍스트 입력과 텍스트 영역 모두에 영향을 미치는 파이어 폭스 특정 버그 것 같다을 클릭하면 이벤트가 버블 업을하지 않는 이유는 어떤 생각을 가지고있다. . 나는 플러그인 몇 가지 매우 심각한 문제를 가지고 생각하지만 그것은 'VAR를 사용하는 잊어 (

<form onclick="alert('hello')"> 
    <input type="text" value="hello!" onfocus="this.value=''"> 
</form> 

: 당신은 몇 줄의 코드로 재현 할 수, 그것은 JQuery와 관련 또는 플러그인과는 아니다 '를 사용하여 전역 범위로 누출되도록합니다. 이렇게하면 같은 페이지에서 여러 개의'.blur '요소가 실패하게됩니다.'빈 값 '은 여전히 ​​양식에 제목 문자열로 전송되므로 구별 할 수 없습니다 사용자가 제목 문자열과 일치하는 '실제'값을 입력합니다.

포커스 이벤트에서 입력 값이 으로 변경되면 이벤트가 버블 링되지 않습니다. 추측 컨대 내 생각에 파이어 폭스는 input 내부의 텍스트에서 click()이 발생했다는 사실을 내부적으로 인식하고 있으며 텍스트의 조상 각각에 대해 해당 이벤트를 버블 링 할 것으로 예상하고 있습니다. 그러나 직접 부모의 click 이벤트로 인해 onfocus가 실행되면 해당 함수는 부모로부터 텍스트를 제거합니다. 이제 클릭 이벤트가 발생했거나 버블 링 할 상위 체인이 없습니다.