복붙노트

[JQUERY] 만 의사 요소에 클릭 이벤트를 감지

JQUERY

만 의사 요소에 클릭 이벤트를 감지

해결법

  1. 1.이건 불가능 해; 당신이 바인드 직접 어떤 이벤트가, 당신은 그들의 부모 요소에 결합 할 수 할 수 있도록 의사 요소 모두에서 DOM의 일부가 아닙니다.

    이건 불가능 해; 당신이 바인드 직접 어떤 이벤트가, 당신은 그들의 부모 요소에 결합 할 수 할 수 있도록 의사 요소 모두에서 DOM의 일부가 아닙니다.

    당신이 적색 영역에 클릭 핸들러를 사용해야하는 경우에만, 당신은, 스팬처럼, 자식 요소을 바로 여는

    태그 뒤에 배치 할 페이지 범위 대신 페이지에 스타일을 적용하기 전에, 그리고 바인딩에 그것.

  2. 2.사실,이 가능합니다. 클릭 된 위치가 요소 이외의 경우이 만 발생하기 때문에 당신은 확인할 수 있습니다 경우 : 이전 또는 :: 클릭 한 후.

    사실,이 가능합니다. 클릭 된 위치가 요소 이외의 경우이 만 발생하기 때문에 당신은 확인할 수 있습니다 경우 : 이전 또는 :: 클릭 한 후.

    이 예에서는 오른쪽에있는 요소를 확인하지만 귀하의 경우에 작동합니다.

    스팬 = document.querySelector ( '범위'); span.addEventListener ({), 기능 (예 '를 클릭' 경우 (e.offsetX> span.offsetWidth) { span.className = 'C2'; } 다른 { span.className = 'C1'; } }); DIV {마진 : 20 픽셀; } 기간 : {후에서 'AFTER'; 위치 : 절대; } span.c1 {배경 : 노란색; } span.c2 : {배경 후 : 노란색; }

    ELEMENT

    JSFiddle

  3. 3.최신 브라우저에서 당신은 포인터 이벤트 CSS 속성을 시도 할 수 있습니다 (하지만 부모 노드에서 마우스 이벤트를 감지하기 위해 불가능에 이르게) :

    최신 브라우저에서 당신은 포인터 이벤트 CSS 속성을 시도 할 수 있습니다 (하지만 부모 노드에서 마우스 이벤트를 감지하기 위해 불가능에 이르게) :

    p {
    position: relative;
    background-color: blue;
    color:#ffffff;
    padding:0px 10px;
    pointer-events:none;
}
p::before {
    content: attr(data-before);
    margin-left:-10px;
    margin-right:10px;
    position: relative;
    background-color: red;
    padding:0px 10px;
    pointer-events:auto;
}

    이벤트 대상이 "P"요소 일 때, 당신은 당신의 "이전 페이지"알고있다.

    당신은 여전히 ​​메인 페이지의 마우스 이벤트를 감지해야하는 경우, 당신은 당신의 HTML 구조를 수정할 수있는 가능성을 고려할 수 있습니다. 당신은 span 태그 다음과 같은 스타일을 추가 할 수 있습니다 :

    p span {
    background:#393;
    padding:0px 10px;
    pointer-events:auto;
}

    이벤트 대상은 이제 "범위"와 모두 "P : 전에"요소.

    JQuery와없는 예 : http://jsfiddle.net/2nsptvcu/

    jQuery로 예 : http://jsfiddle.net/0vygmnnb/

    여기에 포인터 이벤트를 지원하는 브라우저 목록은 다음과 같습니다 http://caniuse.com/#feat=pointer-events

  4. 4.내 대답은 페이지의 확실한 영역을 클릭하고 싶은 사람을 위해 작동합니다. 이것은 나의 절대 위치에 나를 위해 일한 : 후

    내 대답은 페이지의 확실한 영역을 클릭하고 싶은 사람을 위해 작동합니다. 이것은 나의 절대 위치에 나를 위해 일한 : 후

    이 기사 덕분에, 나는 내가 e.pageY 및 e.pageX를 사용하는 대신에 브라우저 사이 e.offsetY / X 및 e.clientY가 / X 문제에 대해 걱정 할 수 있습니다 (jQuery를 함께) 깨달았다.

    항상 같은 것 때문에 문서를 기준으로했다 나는이 event.pageY 아이디어를 좋아했다. 내가 그것을 비교할 수의 부모 요소 오프셋 (offset) 사용 후 (), 문서에 또한 상대의 X와 Y를 반환한다.

    따라서, 나는 절대 변경 전체 페이지의 "클릭"지역의 범위를 가지고 올 수 있습니다.

    여기 codepen 내 데모입니다.

    너무 게으른가 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');
  }
});

  5. 5.짧은 답변:

    짧은 답변:

    나는 그것을했다. 나는 거기에서 모든 작은 사람들을위한 동적 사용하는 기능을 썼다 ...

    페이지의 예를 작업하는 표시

    콘솔에 예를 로깅 작업

    긴 답변 :

    ... 아직 그것을했다.

    사이비 요소가 페이지에서 정말 아니기 때문에 그것은 그것을 할 잠시 걸렸다. 일부 시나리오에서 직장 상기 응답 일부 동안, 모든 요소 (예 : 친 요소의 부분을 오버레이 절대 위치 요소로서) 크기 및 위치 모두 예기치되는 시나리오 모두 동적 일 수 못한다. 광산하지 않습니다.

    용법:

    //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;

});

    그것이 작동하는 방법 :

    그것은 부모 요소 (윈도우의 가장자리로부터 떨어진 위치에 기초하여)가 높이, 폭, 위쪽 및 왼쪽 위치를 잡고 높이, 폭, 상부를 잡고, 왼쪽 위치는 (부모 컨테이너의 가장자리에 기초 )과는 사이비 소자가 화면에 위치를 결정하는 이러한 값을 비교한다.

    마우스가 어디 그런 다음 비교합니다. 만큼 마우스가 새로 만든 변수 범위에서와 같이 다음 true를 반환합니다.

    노트 :

    이 위치 부모 요소 RELATIVE을하는 것이 현명합니다. 당신은 절대 위치 지정된 사이비 요소가있는 경우 (부모가 상대 ... 어쩌면 끈적 너무 일하는 것이 고정되어야한다, 그래서 나는 잘 모릅니다 ....),이 기능은 부모의 크기에 따라에만 작업 위치됩니다.

    암호:

    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

  };      

}

    지원하다:

    나는 즉 바보 때로는 계산 된 값으로 자동 복귀 좋아하는 것 같습니다 .... 잘 모릅니다. IT는 TO WORK 잘 모든 브라우저 IF 치수 ARE SET IN의 CSS를 보인다. 그래서 ... 당신의 사이비 요소에 높이와 폭을 설정하고 단지 위쪽 및 왼쪽으로 이동합니다. 나는 당신이 그것을가 작동하지 않습니다와 괜찮 것들에 그것을 사용하는 것이 좋습니다. 애니메이션 또는 뭔가처럼. 크롬은 평소와 같이 ... 작동합니다.

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

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

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

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

    클릭 가능한 영역을 제한 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
       }
     });

  8. 8.코드의 최단 예 :

    코드의 최단 예 :

    <p><span>Some text</span></p>

    p {
    position: relative;
    pointer-events: none;
}
p::before {
    content: "";
    position: absolute;
    pointer-events: auto;
}
p span {
    display: contents;
    pointer-events: auto;
}

    const all_p = Array.from(document.querySelectorAll('p'));

for (let p of all_p) {
    p.addEventListener("click", listener, false);
};

    이벤트 포인터 이벤트 제어 감지, 제거 대상에서 이벤트를 수신하지만, 의사 요소에서 수신 계속을 클릭 :: 가능하게 이전과 :: 후 그리고 당신은 항상 당신이 경우, 의사 요소를 클릭있는 것을 알 수 계속 클릭해야합니다, 당신은 중첩 된 요소 (예 스팬)의 모든 콘텐츠를 넣어,하지만 우리는 추가 스타일을 적용하지 않기 때문에, 디스플레이 : 내용; 매우 편리한 솔루션이되고 대부분의 브라우저에서 지원. 포인터 이벤트 : 없음; 이미 원래의 게시물에서 언급 한 바와 같이 널리 지원.

    또한 사용되는 자바 스크립트 부분은 널리 Array.from을 지원 ...의를 위해, 그러나 그들은 코드를 사용할 필요가 없습니다.

  9. 9.이 답변 아무도 믿을 수없고, 내 훨씬 더 신뢰할 수 실 거예요.

    이 답변 아무도 믿을 수없고, 내 훨씬 더 신뢰할 수 실 거예요.

    옆주의 사항, 당신은 당신에게, 당신이하려는 요소가 패딩 (요소의 "내부"모든 공간이 완전히 하위 요소에 포함되도록)가없는 클릭 한 할 수있는 행운이 시나리오에 다음 얻는 경우 용기 자체에 대한 클릭 이벤트의 대상을 확인할 수 있습니다. 이 일치하는 경우, 그 수단 당신은을 클릭 한 : 전이나 : 요소 다음에.

    물론이 두 가지 형식 모두 가능하지 것이다 (전후) 내가 해킹 / 속도 수정로 구현 그러나 그것은 약 1 만 다른 요인에 따라 정확하지 않을 수 있습니다 위치 확인의 무리없이 아주 잘 작동 .

  10. 10.아니,하지만 당신은 다음과 같이 할 수있다

    아니,하지만 당신은 다음과 같이 할 수있다

    HTML 파일에서이 섹션을 추가

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

    CSS에서이 같이 할 수

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

    그것은 당신을 도울 것입니다 희망

    11. from https://stackoverflow.com/questions/7478336/only-detect-click-event-on-pseudo-element by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery를 자동 완성 태그 플러그인 StackOverflow의 입력 태그와 같은? [닫은]  (0) 2020.10.01
[JQUERY] 어떻게 Tooltipster 툴팁의 내부 플러그인 jQuery를 검증에서 메시지를 표시하려면?  (0) 2020.10.01
[JQUERY] jQuery를 어떻게 동적으로 추가 HTML 요소에 이벤트를 onclick을 결합하여 [중복]  (0) 2020.10.01
[JQUERY] jQuery를 트리거 파일 입력  (0) 2020.10.01
[JQUERY] jQuery를 "입력"이벤트  (0) 2020.10.01
,

티스토리툴바