짧은 답변:

내가 해냈어 나는 모든 작은 사람들을위한 동적 사용법을 작성했습니다 …

페이지에 표시되는 작업 예

콘솔에 작업 예제 로깅

긴 답변 :

… 아직 해냈습니다.

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를 리턴합니다.

노트 :

부모 요소를 상대적으로 배치하는 것이 좋습니다. 절대 위치가 지정된 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

  };

}

지원하다:

나는 모른다 …. 그것은 바보처럼 보이고 때로는 계산 된 값으로 자동을 반환하는 것을 좋아합니다. 치수가 CSS로 설정된 경우 모든 브라우저에서 잘 작동하는 것으로 보입니다. 따라서 … psuedo 요소의 높이와 너비를 설정하고 위쪽과 왼쪽으로 만 이동하십시오. 나는 그것이 작동하지 않는 괜찮은 것들에 그것을 사용하는 것이 좋습니다. 애니메이션이나 무언가처럼. Chrome은 평소와 같이 작동합니다.

답변

    $('#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
       }
     });