Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Parent element's CSS :active pseudo class does not trigger due to touch events not propagating down in CSS.

by BlackBerry Development Advisor on ‎08-20-2013 04:59 PM - edited on ‎08-20-2013 04:59 PM by BlackBerry Development Advisor (1,395 Views)

Symptoms

When creating custom controls that expect touch input, touching on a child element does not trigger the :active pseudo class on the parent container.

 

<style>
.myButton:active {
    background: blue;
}
</style>

<div class="myButton" id="myButton">
	<h2>Text</h2>
	<h3>Some more text</h3>
</div>

<script>		
document.getElementById("myButton").addEventListener("touchend", function() { // do something }); </script>

 If you click on the <h2>Text</h2>, the button's CSS :active pseudo class will NOT get triggered, while the JavaScript® event propagates without issues.

Diagnosis

This issue has been logged and is being investigated internally.

 

Note: this does not affect the touch event propagation in JavaScript, only in CSS.

Solution

This issue has been logged and is being investigated internally.

 

Workaround:

Add a CSS :after pseudo class.

 

.myButton:after{
	content:"";
	position:absolute; 
	left:-10px;
	right:-10px;
	top:-10px;
	bottom:-10px;
}

 Note: for this trick to work, the buttons position needs to be explicitly specified as "relative":

 

.myButton {
	position: relative;
}

.myButton:active {
	background: blue;
}

.myButton:after {
	content: "";
        position: absolute;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px;
}

 This will create an empty element that spans across the parent element, but is located "after" the element itself and its children, which will trigger the :active pseudo class without issues.

Contributors