Android的软糖与PhoneGap的点击不工作 [英] Android jellybean with Phonegap click not working

问题描述

我们正在开发使用PhoneGap的3.2.2一款Android混合应用程序。

在HTML页面中的一个，我们正在绘制的SVG内部的路径元素的'SVG'元素。每个路径元素绑定使用jQuery click事件。

我们所面临的问题是onclick事件不会被触发的仅适用于部分的路径的元素和休息是工作的罚款，并由此我们越来越仅在了Android OS 4.2和4.3（所有果冻豆）的设备。

如果任何人所面临的类似问题，请帮助。

HTML

 ＆LT; D​​IV ID =世界地图的风格=高度：634px;＆GT;＆LT; D​​IV的风格=宽度：100％;身高：100％;仓位：相对;溢出：隐藏;背景色：RGB（255，255，255）;类=jvectormap容器＆GT;＆下; SVG宽度=600HEIGHT =634＆GT;＆下克变换=刻度（1.3333333333333333）翻译（-141.60559099033824，17.39684462793349）＆GT;＆下;路径d=\"M652.71,228.85l-0.04,1.38l-0.46,-0.21l-0.42,0.3l0.05,0.65l-0.17,-1.37l-0.48,-1.26l-1.08,-1.6l-0.23,-0.13l-2.31,-0.11l-0.31,0.36l0.21,0.98l-0.6,1.11l-0.8,-0.4l-0.37,0.09l-0.23,0.3l-0.54,-0.21l-0.78,-0.19l-0.38,-2.04l-0.83,-1.89l0.4,-1.5l-0.16,-0.35l-1.24,-0.57l0.36,-0.62l1.5,-0.95l0.02,-0.49l-1.62,-1.26l0.64,-1.31l1.7,1.0l0.12,0.04l0.96,0.11l0.19,1.62l0.25,0.26l2.38,0.37l2.32,-0.04l1.06,0.33l-0.92,1.79l-0.97,0.13l-0.23,0.16l-0.77,1.51l0.05,0.35l1.37,1.37l0.5,-0.14l0.35,-1.46l0.24,-0.0l1.24,3.92Z\"数据 -  code =BD补=＃B8E186填充不透明度=1行程=无笔画宽度=0中风不透明度=1补治=EVENODD级=jvectormap区域jvectormap元素/＆GT;＆LT;路径d=\"M429.28,143.95l1.76,0.25l0.13,-0.01l2.16,-0.64l1.46,1.34l1.26,0.71l-0.23,1.8l-0.44,0.08l-0.24,0.25l-0.2,1.36l-1.8,-1.22l-0.23,-0.05l-1.14,0.23l-1.62,-1.43l-1.15,-1.31l-0.21,-0.1l-0.95,-0.04l-0.21,-0.68l1.66,-0.54Z\"数据 -  code =是补=＃B8E186填充不透明度=1行程=无笔画宽度=0中风不透明度=1补治=EVENODD级=jvectormap区域jvectormap元素/＆GT;＆LT;路径d=\"M413.48,260.21l-1.22,-0.46l-0.13,-0.02l-1.17,0.1l-0.15,0.06l-0.73,0.53l-0.87,-0.41l-0.39,-0.75l-0.13,-0.13l-0.98,-0.48l-0.14,-1.2l0.63,-0.99l0.05,-0.18l-0.05,-0.73l1.9,-2.01l0.08,-0.14l0.35,-1.65l0.49,-0.44l1.05,0.3l0.21,-0.02l1.05,-0.52l0.13,-0.13l0.3,-0.58l1.87,-1.1l0.11,-0.1l0.43,-0.72l2.23,-1.01l1.21,-0.32l0.51,0.4l0.19,0.06l1.25,-0.01l-0.14,0.89l0.01,0.13l0.34,1.16l0.06,0.11l1.35,1.59l0.07,1.13l0.24,0.28l2.64,0.53l-0.05,1.39l-0.42,0.59l-1.11,0.21l-0.22,0.17l-0.46,0.99l-0.69,0.23l-2.12,-0.05l-1.14,-0.2l-0.19,0.03l-0.72,0.36l-1.07,-0.17l-4.35,0.12l-0.29,0.29l-0.06,1.44l0.25,1.45Z\"数据 -  code =BF补=＃B8E186填充不透明度=1行程=无笔画宽度=0中风不透明度=1补治=EVENODD级=jvectormap区域jvectormap元素/＆GT;＆LT;路径d=\"M477.63,166.84l0.51,0.9l0.33,0.14l0.9,-0.21l1.91,0.47l3.68,0.16l0.17,-0.05l1.2,-0.75l2.78,-0.67l1.72,1.05l1.02,0.24l-0.97,0.97l-0.91,2.17l0.0,0.24l0.56,1.19l-1.58,-0.3l-0.16,0.01l-2.55,0.95l-0.2,0.28l-0.02,1.23l-1.92,0.24l-1.68,-0.99l-0.27,-0.02l-1.94,0.8l-1.52,-0.07l-0.15,-1.72l-0.12,-0.21l-0.99,-0.76l0.18,-0.18l0.02,-0.39l-0.17,-0.22l0.33,-0.75l0.91,-0.91l0.01,-0.42l-1.16,-1.25l-0.18,-0.89l0.24,-0.27Z\"数据 -  code =BG补=＃B8E186填充不透明度=1行程=无笔画宽度=0中风不透明度=1补治=EVENODD级=jvectormap区域jvectormap元素/＆GT;＆LT;路径d=\"M468.39,164.66l0.16,0.04l0.43,-0.0l-0.43,0.93l0.06,0.34l1.08,1.06l-0.28,1.09l-0.5,0.13l-0.47,0.28l-0.86,0.74l-0.1,0.16l-0.28,1.29l-1.81,-0.94l-0.9,-1.22l-1.0,-0.73l-1.1,-1.1l-0.55,-0.96l-1.11,-1.3l0.3,-0.75l0.59,0.46l0.42,-0.04l0.46,-0.54l1.0,-0.06l2.11,0.5l1.72,-0.03l1.06,0.64Z\"数据 -  code =BA补=＃B8E186填充不透明度=1行程=无笔画宽度=0中风不透明度=1补治=EVENODD级=jvectormap区域jvectormap元素/＆GT;＆LT;路径D =M707.34,273.57l0.76，-0.72l1.59，-1.03l-0.18,1.93l-0.9，-0.06l-0.28,0.14l -0.31,0.51l-0.68，-0.78Z数据 -  code =BN补=＃B8E186填充不透明度=1行程=无笔画宽度=0行程不透明=1填充规则=EVENODD类=jvectormap区域jvectormap元件/＆GT;＆下/ g取代;＆下克/＆GT;＆下; / SVG＆GT;＆下;股利类=jvectormap-zoomin ＆GT; +＆LT; / DIV＆GT;＆LT; D​​IV CLASS =jvectormap-zoomout＆GT;  - ＆LT; / DIV＆GT;＆LT; / DIV＆GT;＆LT; / DIV＆GT;
 

JQUERY：

  $（'＃世界地图）。在（'点击'，'SVG路径，功能（E）{
    变量$此= $（e.target）;
    警报（$ this.is（'路径'））;
}）;
 

解决方案

请从款式删除溢出的属性，这与冲突的单击事件中的PhoneGap

We are developing a Android Hybrid application using phonegap 3.2.2.

In one of the html page, we are rendering an 'svg' element with 'path' elements inside the svg. Each path element is bind to a click event using the jquery.

The issue we are facing is the "onclick event will not be triggered only for some of the path elements and for rest it is working fine" and also this we are getting only in the devices with Android OS 4.2 and 4.3 (All "Jelly Bean").

If anyone has faced the similar issue, kindly help.

HTML:

<div id="world-map" style="height: 634px;"><div style="width: 100%; height: 100%; position: relative; overflow: hidden; background-color: rgb(255, 255, 255);" class="jvectormap-container"><svg width="600" height="634"><g transform="scale(1.3333333333333333) translate(-141.60559099033824, 17.39684462793349)"><path d="M652.71,228.85l-0.04,1.38l-0.46,-0.21l-0.42,0.3l0.05,0.65l-0.17,-1.37l-0.48,-1.26l-1.08,-1.6l-0.23,-0.13l-2.31,-0.11l-0.31,0.36l0.21,0.98l-0.6,1.11l-0.8,-0.4l-0.37,0.09l-0.23,0.3l-0.54,-0.21l-0.78,-0.19l-0.38,-2.04l-0.83,-1.89l0.4,-1.5l-0.16,-0.35l-1.24,-0.57l0.36,-0.62l1.5,-0.95l0.02,-0.49l-1.62,-1.26l0.64,-1.31l1.7,1.0l0.12,0.04l0.96,0.11l0.19,1.62l0.25,0.26l2.38,0.37l2.32,-0.04l1.06,0.33l-0.92,1.79l-0.97,0.13l-0.23,0.16l-0.77,1.51l0.05,0.35l1.37,1.37l0.5,-0.14l0.35,-1.46l0.24,-0.0l1.24,3.92Z" data-code="BD" fill="#B8E186" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"/><path d="M429.28,143.95l1.76,0.25l0.13,-0.01l2.16,-0.64l1.46,1.34l1.26,0.71l-0.23,1.8l-0.44,0.08l-0.24,0.25l-0.2,1.36l-1.8,-1.22l-0.23,-0.05l-1.14,0.23l-1.62,-1.43l-1.15,-1.31l-0.21,-0.1l-0.95,-0.04l-0.21,-0.68l1.66,-0.54Z" data-code="BE" fill="#B8E186" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"/><path d="M413.48,260.21l-1.22,-0.46l-0.13,-0.02l-1.17,0.1l-0.15,0.06l-0.73,0.53l-0.87,-0.41l-0.39,-0.75l-0.13,-0.13l-0.98,-0.48l-0.14,-1.2l0.63,-0.99l0.05,-0.18l-0.05,-0.73l1.9,-2.01l0.08,-0.14l0.35,-1.65l0.49,-0.44l1.05,0.3l0.21,-0.02l1.05,-0.52l0.13,-0.13l0.3,-0.58l1.87,-1.1l0.11,-0.1l0.43,-0.72l2.23,-1.01l1.21,-0.32l0.51,0.4l0.19,0.06l1.25,-0.01l-0.14,0.89l0.01,0.13l0.34,1.16l0.06,0.11l1.35,1.59l0.07,1.13l0.24,0.28l2.64,0.53l-0.05,1.39l-0.42,0.59l-1.11,0.21l-0.22,0.17l-0.46,0.99l-0.69,0.23l-2.12,-0.05l-1.14,-0.2l-0.19,0.03l-0.72,0.36l-1.07,-0.17l-4.35,0.12l-0.29,0.29l-0.06,1.44l0.25,1.45Z" data-code="BF" fill="#B8E186" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"/><path d="M477.63,166.84l0.51,0.9l0.33,0.14l0.9,-0.21l1.91,0.47l3.68,0.16l0.17,-0.05l1.2,-0.75l2.78,-0.67l1.72,1.05l1.02,0.24l-0.97,0.97l-0.91,2.17l0.0,0.24l0.56,1.19l-1.58,-0.3l-0.16,0.01l-2.55,0.95l-0.2,0.28l-0.02,1.23l-1.92,0.24l-1.68,-0.99l-0.27,-0.02l-1.94,0.8l-1.52,-0.07l-0.15,-1.72l-0.12,-0.21l-0.99,-0.76l0.18,-0.18l0.02,-0.39l-0.17,-0.22l0.33,-0.75l0.91,-0.91l0.01,-0.42l-1.16,-1.25l-0.18,-0.89l0.24,-0.27Z" data-code="BG" fill="#B8E186" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"/><path d="M468.39,164.66l0.16,0.04l0.43,-0.0l-0.43,0.93l0.06,0.34l1.08,1.06l-0.28,1.09l-0.5,0.13l-0.47,0.28l-0.86,0.74l-0.1,0.16l-0.28,1.29l-1.81,-0.94l-0.9,-1.22l-1.0,-0.73l-1.1,-1.1l-0.55,-0.96l-1.11,-1.3l0.3,-0.75l0.59,0.46l0.42,-0.04l0.46,-0.54l1.0,-0.06l2.11,0.5l1.72,-0.03l1.06,0.64Z" data-code="BA" fill="#B8E186" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"/><path d="M707.34,273.57l0.76,-0.72l1.59,-1.03l-0.18,1.93l-0.9,-0.06l-0.28,0.14l-0.31,0.51l-0.68,-0.78Z" data-code="BN" fill="#B8E186" fill-opacity="1" stroke="none" stroke-width="0" stroke-opacity="1" fill-rule="evenodd" class="jvectormap-region jvectormap-element"/></g><g/></svg><div class="jvectormap-zoomin">+</div><div class="jvectormap-zoomout">−</div></div></div>

JQUERY:

$('#world-map').on('click','svg path', function (e) {


    var $this = $(e.target);
    alert($this.is('path'));
});

解决方案

Please remove overflow attribute from style ,this conflicts with click event in phonegap

这篇关于Android的软糖与PhoneGap的点击不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！