禁用触摸元素的伪内容 [英] disable touch on the pseudo content of an element

问题描述

实际上，我有一个切换按钮组件，我使用:: before伪类向其中插入文本。现在，当我点击切换的按钮文本时，切换按钮状态更改。如何避免这种情况？

Ionic 2代码：

 < / p>离子项> 
< ion-label>部分内容< / ion-label> 
< ion-toggle（ionChange）=someMethod（$ event）>< / ion-toggle> 
< / ion-item> 
  

班级：

  .toggle-icon {
 display：inline-block！important; 
} 
 
 .item-inner {
 display：block; 
} 
 
 ion-toggle :: before {
 content：Set as Default; 
 padding-left：11％; 
} 
  

要求：我只能使用上述方案创建我的必需视图。

预期：我希望在单击切换按钮时调用someMethod（），而不是伪文本。

感谢您的帮助!!

将事件侦听器附加到一个元素，但排除该元素的伪内容。原因是：伪内容不是DOM的一部分，因此不能从元素选择中排除。

但是，您可以监听元素（连同其伪内容）和通过检查点击/触摸位置，在事件监听器函数（ someMethod ）中进行排除。例如，请查看小提琴。

PS在你的情况下，我猜是：之前伪内容被用来标记切换按钮？如果是，< label> 标记更合适。

Actually I have one toggle button component and I used the ::before pseudo class to insert text into it. Now when I'm clicking on toggle's button text , toggle button state changes. how to avoid this?

Ionic 2 code:

<ion-item>
    <ion-label>some content</ion-label>
    <ion-toggle (ionChange)="someMethod($event)"></ion-toggle>  
</ion-item>

classes :

 .toggle-icon {
    display: inline-block !important;
}

.item-inner {
    display: block;
}

ion-toggle::before {
    content: "Set as Default";
    padding-left: 11%;
}

Requirement: I can only create my required view by using above scheme.

Expected: I want someMethod() to be called when toggle button is clicked, not pseudo text.

Thanks for any help!!

解决方案

It's not possible to attach event listener to one element, but exclude that element's pseudo content. The reason is: pseudo content is not part of DOM, thus cannot be excluded from element selection.

However, you can listen the element (together with its pseudo content) and make exclusion inside the event listener function (someMethod in this case), by checking the clicked/touched position. Check this fiddle for example.

p.s. In your case, I guess the :before pseudo content is used to label toggle button? If yes, <label> tag is more appropriate.

这篇关于禁用触摸元素的伪内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！