jQuery stopPropagation() stopPropagation() html * { margin:0; padding:0; }body { margin-left:300px; margin-top:60px; }#parent { width:200px; height:200px; border:1px solid red; background-color: yellow; padding:150px;}#child { width:200px; height:200px; background-color: red; color:#FF0000 }$(document).ready(function(){$('#child').bind('click', function(event){event.stopPropagation(); // 주석처리후에 실행하면 자식엘리먼트 클릭시 부모엘리먼트도 클.. 더보기 jQuery 이벤트 모델 전파 과정 최상위 루투에서 자식 엘리먼트들을 타고 이벤트의 타깃까지 내려가는 캡쳐 단계가 일어나고 다시 반대로 이벤트의 타깃으로부터 최상위 루트까지 올라가는 버블 단계가 일어납니다. 부모엘리먼트와 자식 엘리먼트 두곳에 click이벤트를 생성 하고 자식 엘리먼트를 클릭할 경우클릭하지 않은 부모엘리먼트에서 클릭이 발생하게 됩니다. 이런 의도치 않은 반응이 일어나는 문제는 이벤트 모델의 전파과정 중 버블링 단계에서 이벤트를 발생하기 때문입니다. ※ 하지만 event 객체에 stopProgation() 메서드를 호출하면 이단계가 진행되지 않도록 사전에 차단 할 수 이습니다. 더보기 jQuery event 프로퍼티 이벤트가 발생되면 이벤트에 매개변수로 넘긴 콜백함수가 호출 되는데이때 매개변수로 event객체를 넘겨줍니다. 이 이벤트 객체의 프로퍼티는 이벤트 발생시 얻을 수 잇는 정보가 있으며, 이벤트 모델의 전파과정을 컨트롤 할 수 있는 메서드를 포함합니다. 브라우저 기본동작이 발생하지 않도록 하는 메서드도 포함합니다. $(document).ready(function(){ $('#box').click(function(event){var clientyx = (event.clientX); // coument에서 스크롤 이동값을 제외하고 마우스 x좌표var clienty = (event.clientY); // coument에서 스크롤 이동값을 제외하고 마우스 y좌표var offsetx = (event.offsetX); .. 더보기 이전 1 ··· 39 40 41 42 43 44 45 ··· 125 다음
