جافاسكريبت - اكتشاف حدث النقر فقط على العنصر الزائف

يرجى مراجعة هذا المثال: http://jsfiddle.net/ZWw3Z/5/

رمزي هو:

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

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

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>

أود أن أُفعّل حدث النقر فقط على العنصر الوهمي (الجزء الأحمر). أي، لا أريد أن يُفعّل حدث النقر على الجزء الأزرق.

الإجابة رقم 1

هذا غير ممكن؛ العناصر الزائفة ليست جزءًا من DOM على الإطلاق، لذلك لا يمكنك ربط أي أحداث بها مباشرة، يمكنك فقط الربط بعناصرها الأصلية.

إذا كان يجب أن يكون لديك معالج نقر على المنطقة الحمراء فقط، عليك إنشاء عنصر فرعي، مثل span، وضعه مباشرة بعد وسم <p> الافتتاحي، وتطبيق الأنماط على p span بدلاً من p:before، وربطه به.

الإجابة رقم 2

في الواقع، من الممكن طالما أن محتوى ::before أو ::after الخاص بك ليس موضعه بحيث يتداخل مع العنصر نفسه، من خلال النظر في إحداثيات الصفحة للحدث.

هذا المثال يتحقق فقط من العنصر الموجود على اليمين ولكن يجب أن يعمل في حالتك (في الحالة العامة ربما ترغب في العمل مع .getBoundingClientRect() بدلاً من ذلك).

const span = document.querySelector('span');

span.addEventListener('click', function(e) {
  if (e.offsetX > span.offsetWidth) {
    span.className = 'c2';
  } else {
    span.className = 'c1';
  }
});

div {
  margin: 20px;
}
span {
  cursor: pointer;
}
span:after {
  content: 'AFTER';
  position: absolute;
}

span.c1 {
  background: yellow;
}

span.c2:after {
  background: yellow;
}

<div><span>ELEMENT</span></div>

JSFiddle

الإجابة رقم 3

على المتصفحات الحديثة يمكنك التجربة باستخدام خاصية css الخاصة بـ pointer-events (ولكن هذا يؤدي إلى استحالة الكشف عن أحداث الماوس على العقدة الأصلية):

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" الخاص بك، فأنت تعرف أنه "p:before" الخاص بك.

إذا كنت لا تزال بحاجة إلى اكتشاف أحداث الماوس على العنصر الرئيسي p، يمكنك التفكير في إمكانية تعديل هيكل HTML الخاص بك. يمكنك إضافة علامة span والأسلوب التالي:

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

أهداف الحدث الآن هي كل من عناصر "span" و "p:before".

مثال بدون jquery: http://jsfiddle.net/2nsptvcu/

مثال مع jquery: http://jsfiddle.net/0vygmnnb/

إليك قائمة المتصفحات التي تدعم أحداث المؤشر: http://caniuse.com/#feat=pointer-events

الإجابة رقم 4

إجابة قصيرة:

لقد فعلت ذلك. كتبت دالة للاستخدام الديناميكي لجميع الأشخاص الصغار هناك...

مثال عملي يتم عرضه على الصفحة

مثال عملي لتسجيل البيانات إلى وحدة التحكم

إجابة طويلة:

...ما زال فعلها.

استغرق مني بعض الوقت للقيام بذلك، نظرًا لأن العنصر الزائف ليس فعليًا على الصفحة. بينما بعض الإجابات أعلاه تعمل في بعض السيناريوهات، فإنها جميعًا تفشل في أن تكون ديناميكية وأيضًا تعمل في سيناريو يكون فيه العنصر غير متوقع في الحجم والموقع (مثل العناصر المتموضعه بشكل مطلق التي تغطي جزءًا من العنصر الأب). لم يحدث ذلك مع حلي.

الاستخدام:

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

});

كيف يعمل:

يقوم بالحصول على الطول والعرض، والمواقع العلوية واليسرى (استنادًا إلى المسافة من حافة النافذة) للعنصر الأب ويقوم بالحصول على الطول والعرض، والمواقع العلوية واليسرى (استنادًا إلى حافة الحاوية الأم) ويقارن هذه القيم لتحديد مكان العنصر الوهمي على الشاشة.

ثم يقارن مكان الماوس. طالما أن الماوس في نطاق المتغير الذي تم إنشاؤه حديثًا، فإنه يُرجع صحيحًا.

ملاحظة:

من الحكمة جعل العنصر الأب ذو موضع نسبي. إذا كان لديك عنصر زائف ذو موضع مطلق، فإن هذه الوظيفة ستعمل فقط إذا كان موقعه يعتمد على أبعاد الأب (لذلك يجب أن يكون الأب نسبيًا ... ربما سيعمل الموضع الثابت أو اللاصق أيضًا ... لا أعرف).

الرمز:

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 غبي ويحب إرجاع auto كقيمة محسوبة أحيانًا. يبدو أنه يعمل بشكل جيد في جميع المتصفحات إذا تم تحديد الأبعاد في CSS. لذا... عيّن الارتفاع والعرض على العناصر الوهمية الخاصة بك ولا تحركها إلا باستخدام top و left. أنصح باستخدامه على أشياء لا تمانع إذا لم تعمل بشكل صحيح. مثل الرسوم المتحركة أو شيء من هذا القبيل. كروم يعمل... كالعادة.