Added a custom button to close the card. With a click of the mouse, everything is OK, when I turn on cellular emulation in DevTools (and on real devices too), the event slips onto the blocks under the map.
In the example below, in the cellular emulation mode, open the map, tap Close, we get the color change of the square under the map.
const POINTS = { "type": "FeatureCollection", "features": [ {"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContent": "Аптека1", "clusterCaption": "Аптека11", "hintContent": "Аптека111", "iconCaption": "Аптека1111"}, "options": {"preset": "islands#blueCircleDotIconWithCaption"}}, {"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContent": "Аптека2", "clusterCaption": "Аптека22", "hintContent": "Аптека222", "iconCaption": "Аптека2222"}, "options": {"preset": "islands#blueCircleDotIconWithCaption"}}, {"type": "Feature", "id": 2, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContent": "Аптека3", "clusterCaption": "Аптека33", "hintContent": "Аптека333", "iconCaption": "Аптека3333"}, "options": {"preset": "islands#blueCircleDotIconWithCaption"}}, ] } let map; toggle.onclick = e => e.target.classList.toggle('bg-green'); function showMap() { holder.classList.remove('dn'); map.container.fitToViewport(); } function close() { holder.classList.add('dn'); } function addCloseButton() { const closeButton = new ymaps.control.Button({ data: { content: "Закрыть", }, options: { selectOnClick: false, }, }); closeButton.events.add('click', close); map.controls.add(closeButton, { float: 'right' }); } function addPoints(points) { const BalloonContentLayout = ymaps.templateLayoutFactory.createClass(` <div class="pb5"> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> <div class="pa3">{{properties.balloonContent}}</div> </div> <div class="absolute bottom-0 w-100 bg-white pa2 cf tr"> <div class="ymaps-separator"></div> <button id="choose-point-button" class="ba br2 b--blue pa2 bg-blue white">Выбрать</button> </div> `, { build: function () { BalloonContentLayout.superclass.build.call(this); const button = document.getElementById('choose-point-button'); button.addEventListener('click', this.onChooserClick); }, clear: function () { const button = document.getElementById('choose-point-button'); button.removeEventListener('click', this.onChooserClick); BalloonContentLayout.superclass.clear.call(this); }, onChooserClick: function (e) { alert('Объект на карте выбран.'); } }); const objectManager = new ymaps.ObjectManager({ clusterize: true, gridSize: 32, clusterIconLayout: "default#pieChart", geoObjectBalloonContentLayout: BalloonContentLayout, clusterBalloonContentLayout: "cluster#balloonCarousel", balloonItemContentLayout: BalloonContentLayout, }); map.geoObjects.add(objectManager); objectManager.add(points); const bounds = objectManager.getBounds(); map.setBounds(bounds, { checkZoomRange: true }); } function init() { btn.onclick = showMap; map = new ymaps.Map('holder', { center: [55.76, 37.64], zoom: 10, controls: ['geolocationControl', 'zoomControl', 'searchControl'], }, { searchControlProvider: 'yandex#search', balloonPanelMaxMapArea: Infinity, }); addCloseButton(); addPoints(POINTS); } ymaps.ready(init); .ymaps-separator { position: absolute; right: -30px; top: 0; left: -30px; z-index: 1; background: #ccc; height: 1px; } .ymaps-separator:after, .ymaps-separator:before { content: ''; position: absolute; width: 30px; height: 1px; } .ymaps-separator:after { right: 0; background: -webkit-gradient(linear,left top,right top,color-stop(0,#ccc),color-stop(100%,#fff)); background: -webkit-linear-gradient(left,#ccc 0,#fff 100%); background: linear-gradient(to right,#ccc 0,#fff 100%); } .ymaps-separator:before { left: 0; background: -webkit-gradient(linear,left top,right top,color-stop(0,#fff),color-stop(100%,#ccc)); background: -webkit-linear-gradient(left,#fff 0,#ccc 100%); background: linear-gradient(to right,#fff 0,#ccc 100%); } <link href="https://unpkg.com/tachyons@4.7.0/css/tachyons.min.css" rel="stylesheet"/> <div id="toggle" class="h5 w5 pa5 bg-red absolute right-0 tc pointer"> Меняю цвет по клику </div> <button id="btn" class="ba br3 ma4 pa2 pointer">Показать карту</button> <div id="holder" class="dn absolute absolute--fill bg-yellow"></div> <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU"></script> I can not understand why this is happening.
Judging by the fact that it is described here https://learn.javascript.ru/events-and-timing-depth# queue- events, I assume that the touchstart on the "Close" button additionally generates a click event and then processes it separately. I only catch the click, why does it work if on the card container make holder.addEventListener.('click', e => e.stopPropagation()) .
And it’s not at all clear how holder.addEventListenter('touchstart', e => e.preventDefault()) can influence, if added, this problem is solved, but scrolling of large content in the balun is killed and the custom button in the balun is not pressed (does not work on the mobile phone, on the desktop it scrolls and is pressed)
closeButton.events.add('click', close);, added$('#map').on('click', '#button_close', close);- works, but not the case, of course. - Alukos