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 (1,941 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.