javascript - 버블링 - 자바스크립트 클릭이벤트 발생




의사 요소에서 클릭 이벤트 만 감지합니다. (6)

Click 이벤트에 조건을 추가하여 클릭 가능 영역을 제한합니다.

    $('#thing').click(function(e) {
       if (e.clientX > $(this).offset().left + 90 &&
             e.clientY < $(this).offset().top + 10) {
                 // action when clicking on after-element
                 // your code here
       }
     });

DEMO

내 코드는 다음과 같습니다.

p {
    position: relative;
    background-color: blue;
}

p:before {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;
}

이 피들을보십시오 : http://jsfiddle.net/ZWw3Z/5/

의사 요소 (빨간색 비트)에서만 클릭 이벤트를 트리거하고 싶습니다. 즉, 클릭 이벤트가 파란색 비트에서 트리거되는 것을 원하지 않습니다.


내 답변은 페이지의 결정적인 부분을 클릭하려는 모든 사용자에게 적용됩니다. 이것은 나의 절대적 위치 에있는 나를 위해 일했다 :

article 덕분에 jQuery를 사용하여 e.pageYe.pageXe.offsetY/Xe.clientY/X 문제에 대해 걱정할 필요없이 사용할 수 있다는 것을 깨달았습니다.

시행 착오를 거쳐 jQuery 이벤트 객체에서 clientX 및 clientY 마우스 좌표를 사용하기 시작했습니다. 이 좌표는 브라우저의보기 포트의 왼쪽 위 모서리를 기준으로 마우스의 X 및 Y 오프셋을 나타냅니다. 그러나 Karl Swedberg와 Jonathan Chaffer의 jQuery 1.4 Reference Guide를 읽으면서 종종 pageX와 pageY 좌표를 참조하는 것을 보았습니다. 업데이트 된 jQuery 문서를 확인한 후, jQuery에 의해 표준화 된 좌표임을 알았습니다. 그리고, 나는 그들이 뷰포트 포트뿐만 아니라 전체 문서에 비례하여 마우스의 X 오프셋과 Y 오프셋을 주었다는 것을 알았다.

나는이 event.pageY 아이디어가 좋았습니다. 문서와 관련이 있기 때문에 언제나 같을 것이기 때문입니다. 나는 그것을 X와 Y를 문서에 상대적으로 반환하는 offset ()을 사용하여 my : after의 부모 요소와 비교할 수 있습니다.

따라서 변경되지 않는 전체 페이지에서 '클릭 가능'범위를 찾을 수 있습니다.

코데펜에 대한 데모입니다 .

또는 codepen에 너무 게으른 경우 여기 JS가 있습니다.

* 필자는 예제의 Y 값만 신경 썼다.

var box = $('.box');
// clickable range - never changes
var max = box.offset().top + box.outerHeight();
var min = max - 30; // 30 is the height of the :after

var checkRange = function(y) {
  return (y >= min && y <= max);
}

box.click(function(e){
  if ( checkRange(e.pageY) ) {
    // do click action
    box.toggleClass('toggle');
  }
});

아니,하지만 너는 이렇게 할 수있어.

html 파일에서이 섹션 추가

<div class="arrow">
</div>

CSS에서 다음과 같이 할 수 있습니다.

p div.arrow {
content: '';
position: absolute;
left:100%;
width: 10px;
height: 100%;
background-color: red;

} 희망이 당신을 도울 것입니다.


이 대답들 중 어느 것도 신뢰할 만하다. 그리고 광산은 훨씬 더 신뢰할 만하다.

단점을 제외하고, 클릭 한 요소가 패딩을 포함하지 않는 행운의 시나리오에 빠지면 (요소의 "내부"공간이 모두 하위 요소로 완전히 덮여 있음), 그런 다음 컨테이너 자체에 대한 클릭 이벤트의 대상을 확인할 수 있습니다. 일치하면 a : before 또는 : after 요소를 클릭했음을 의미합니다.

분명히 이것은 두 가지 유형 (전후)에서 가능하지 않지만 해킹 / 속도 수정으로 구현했으며 약 100 만 가지 요소에 따라 부정확 할 수있는 위치 확인을하지 않고도 매우 잘 작동하고 있습니다. .


이것은 나를 위해 작동합니다 :

$('#element').click(function (e) {
        if (e.offsetX > e.target.offsetLeft) {
            // click on element
        }
         else{
           // click on ::before element
       }
});

짧은 답변:

나는 그것을했다. 나는 심지어 순수한 자바 스크립트에서 그것을했고 모든 작은 사람들을 위해 역동적 인 사용을위한 함수를 작성했습니다 ...

당신이 훔칠 수있는 함수를 사용한 작업 예제

긴 답변 :

... 아직도 그랬어.

psuedo 요소가 실제로 페이지에 없으므로 잠시 시간이 걸립니다. 위의 답변 중 일부는 일부 시나리오에서 작동하지만 요소가 모두 크기와 위치가 예상치 못한 시나리오 (예 : 절대 위치 요소가 상위 요소의 일부를 오버레이하는 경우)에서 모두 동적이면서 작동하지 않습니다. 내 것이 아닙니다.

용법:

//some element selector and a click event...plain js works here too
$("div").click(function() {
    //returns an object {before: true/false, after: true/false}
    psuedoClick(this);

    //returns true/false
    psuedoClick(this).before;

    //returns true/false
    psuedoClick(this).after;

});

작동 원리 :

상위 요소의 높이, 너비, 위쪽 및 왼쪽 위치 (창 가장자리에서 떨어진 위치를 기준으로)를 가져오고 높이, 너비, 위쪽 및 왼쪽 위치를 가져옵니다 (부모 컨테이너의 가장자리를 기준으로 함). ) 그 값을 비교하여 psuedo 요소가 화면에 있는지 확인합니다.

그런 다음 마우스 위치를 비교합니다. 마우스가 새로 생성 된 변수 범위에 있으면 true를 반환합니다.

노트 :

상위 요소를 RELATIVE 위치에 두는 것이 좋습니다. 절대 위치 결정된 psuedo 요소가있는 경우이 함수는 부모의 차원을 기반으로 배치 된 경우에만 작동합니다 (부모는 상대적이어야합니다 ... 어쩌면 끈적 거리거나 고정 되어도 작동합니다 ...).

암호:

function psuedoClick(parentElem) {

    var beforeClicked,
      afterClicked;

  var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10),
      parentTop = parseInt(parentElem.getBoundingClientRect().top, 10);

  var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10),
      parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10);

  var before = window.getComputedStyle(parentElem, ':before');

  var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)),
      beforeEnd = beforeStart + parseInt(before.width, 10);

  var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)),
      beforeYEnd = beforeYStart + parseInt(before.height, 10);

  var after = window.getComputedStyle(parentElem, ':after');

  var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)),
      afterEnd = afterStart + parseInt(after.width, 10);

  var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)),
      afterYEnd = afterYStart + parseInt(after.height, 10);

  var mouseX = event.clientX,
      mouseY = event.clientY;

  beforeClicked = (mouseX >= beforeStart && mouseX <= beforeEnd && mouseY >= beforeYStart && mouseY <= beforeYEnd ? true : false);

  afterClicked = (mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd ? true : false);

  return {
    "before" : beforeClicked,
    "after"  : afterClicked

  };      

}

지원하다:

나는 모른다. ... ie 그것은 바보 같고 때때로 계산 된 값으로 자동을 돌려주는 것을 좋아한다. 크기가 CSS로 설정된 경우 모든 브라우저에서 제대로 작동합니다. 그래서 ... 너의 psuedo 요소에 너의 높이와 너비를 설정하고 위쪽과 왼쪽으로 만 움직이십시오. 나는 당신이 잘하고있는 것들에 그것을 사용하지 않는 것이 좋습니다. 애니메이션이나 무언가처럼. Chrome은 평소와 같이 작동합니다.





css