It seems that the issue at hand may not be related to propagation, but rather a design flaw. I have come across information suggesting that propagation problems tend to bubble up, however, let me explain my situation. I am working with a table edit grid.
Each cell in this grid contains two main blocks: an Editing div (which houses a form for editing displayed values) and a View div (which displays the values). Both are set to overflow hidden in order to maintain uniform row height.
Upon loading, the Editing div is not visible while the View div is displayed. When hovering over a cell, the Editing div is shown while the View values are hidden.
The problem arises when the Editing view contains clickable elements (in this case, tags). On phones or tablets, clicking on the coordinates where these clickable elements are located triggers those elements to be clicked.
<td class="editGridCell" ng-if="!block && ($index > 0)" ng-repeat="attobj in columns track by $index">
<div class="contentEdit">
<form name="theForm" novalidate>
<div ng-if="true" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
</div>
</form>
</div>
<div ng-class="compressed ? 'contentValues' : 'contentValuesDecompressed'">
<div ng-repeat="v in dbo.get4(attobj.key) track by $index">
<p ng-if="v.cid">{{ v.displayName() }}</p>
<p ng-if="!v.cid">{{ v }}</p>
</div>
</div>
</td>
The template the form calls contains clickable tags:
<script type="text/ng-template" id="form_field_ref">
<div ng-init="tmp = dbo.get(attobj.name)">
<div ng-model="tmp" ui-sortable="{ 'ui-floating': undefined}" class="clearfix">
<div ng-repeat="dbo2 in dbo.get(attobj.name) track by $index" style="float:left; padding-right: 3px; padding-bottom: 5px;">
<div class="tag sortableTag">
<a href="#/view/{{ dbo2.cid }}" target="_blank"gt;{{ dbo2.displayName() }}</a>
<a href="" class="glyphicon glyphicon-remove" ng-click="removeValue(dbo, attobj.name, $index)"></a>
</div>
</div>
</div>
</div>
<div ng-include="'typeaheadtemplate'" style="width: 100%;"></div>
</script>
CSS Styles:
.superResponsive .editGridCell{
border: 1px solid lightBlue;
vertical-align: top;
position: relative;
}
.contentEdit{
display:none;
overflow: hidden;
padding:4px;
}
.contentValues{
display:block;
color:#0887A7!important;
min-height: 20px;
overflow: hidden;
/*min-width:100px;*/
width:100%;
height: 25px;
padding: 5px;
}
.contentValuesDecompressed{
display:block;
color:#0887A7!important;
min-height: 25px;
overflow: visible;
/*min-width:100px;*/
width:100%;
height: auto;
padding: 5px;
}
.contentDecompressed{
color:#0887A7!important;
min-height: 25px;
overflow: visible;
width:auto;
height: auto;
padding: 5px;
}
.editGridCell:hover .contentEdit{
display: block;
height:auto;
width: 90%;
background:#d8ecf2;
position:absolute;
z-index: 40;
overflow: visible;
}
.editGridCell:hover .contentValuesDecompressed{
visibility: hidden;
}
.editGridCell:hover .contentValues{
visibility: hidden;
overflow:visible;
}
ON MOBILE DEVICES, A CLICK ON THE CELL TRIGGERS TAG CLICK(IF TAG WILL SHOW)! https://i.stack.imgur.com/hnLnB.png
To simplify the issue: