9

通常のリンクを Sencha Touch 2 ベースのモバイル アプリケーションのボタンに似せたスタイルにしましたが、ほとんどのリンクが iPhone の Safari で機能しないという問題があります。

<a>リンクは、ラベル テキストを含む内部<span>要素を持つ通常のタグです。要素にはパディングがあり<a>、タップを登録できます。<span>親アンカーにタップがリンクタップとして登録されるのを内側がブロックしているようで、背景が透明になっています。

マークアップは次のとおりです。

<a href="http://test-site.xx/full-site-page?param=value" class="x-button-normal x-button btn-profile">
    <span class="x-button-label">View profile on full site</span>
</a>

これを Chrome でテストしても問題はありません。つまり、スパンをクリックすると、親のハイパーリンクがたどられます。どちらも Webkit ベースのブラウザーです。私たちのテスターの 1 人は、これを Macbook の Safari でも問題なくテストしました。また、Wacom Bamboo タブレットを使用して Chrome でこれをテストしましたが、問題はありませんでした。これは、モバイル デバイス (iPhone と Android 2.2 の両方でテスト済み) でのみ発生する問題です。

<span>要素に設定して、タップが親ハイパーリンクにフォールスルーできるようにする CSS プロパティはありますか? 理想的には、JavaScript を使用してイベントを設定する必要はありません。なぜこれが期待どおりに機能しないのかについてのアイデアはありますか?

更新: Chrome の開発者コンソールから報告された内部スパンのスタイルは次のとおりです。

-webkit-box-align: center;
-webkit-box-flex: 1;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-drag: none;
-webkit-user-select: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
border-bottom-color: white;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: white;
border-left-style: none;
border-left-width: 0px;
border-right-color: white;
border-right-style: none;
border-right-width: 0px;
border-top-color: white;
border-top-style: none;
border-top-width: 0px;
box-shadow: none;
box-sizing: border-box;
color: white;
cursor: auto;
display: inline;
font-family: 'Helvetica Neue', HelveticaNeue, Helvetica-Neue, Helvetica, 'BBAlpha Sans', sans-serif;
font-size: 18px;
font-weight: bold;
height: auto;
line-height: 21px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: static;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
width: auto;

どうもありがとう。

4

2 に答える 2

11

次の CSS プロパティについて言及しているこの投稿のおかげで、解決しました。

pointer-events: none;

<span>これをインナー(および 2 番目のコメントで言及したようにインナー フロート)のスタイルに追加すると、<img>これらはタップを親ハイパーリンクに渡すことができます。

奇妙なことに、Sencha Touch 2 が DOM に干渉しているように見えましたが、具体的には何だったのかはわかりません。完全に静的な HTML ページ (JavaScript を使用せず、Sencha Touch 2 はもちろん) で同様のスタイルのボタンをモックアップしても、モバイル デバイスでは元の問題は発生しませんでした。

単純なケース (単一の 、フローティング画像なし) の別のオプションは<span>、スタイルをリファクタリングして inner の必要性を排除することでした<span>が、これはより複雑なケースでは実行できませんでした。

<a class="attachment" href="/someRepository/someDownload.pdf">
    <img src="/images/fileExtension-pdf.png" alt="Attachment"/>
    <span class="title">Title of download</span>
    <span class="size">xxx kB</span>
</a>
于 2012-06-06T04:08:14.763 に答える
0

これはSenchaTouchのズーム防止と関係があると思います。彼らは、デフォルトのほとんどのタッチスタートイベント（リンクの使用を強制終了する）を防ぐためのコードを追加しました。アンカーには例外がありますが、アンカーの子には例外があります（したがって、アンカー自体をタップしても問題なく機能しますが、アンカー内のスパンをタップすることはできません）。アプリケーション起動メソッドでクイックフィックスにモンキーパッチを適用することができました。

Ext.Viewport.setPreventZooming(false); // unbind any existing handler
Ext.Viewport.doPreventZooming = Ext.Function.createInterceptor(Ext.Viewport.doPreventZooming, function(e){
    return !Ext.fly(e.target).findParent('a');
    });
Ext.Viewport.setPreventZooming(true);

上記のコードには保証がありません（Androidでテストされていないため、かなり非効率的であると思われます）。私もこれをバグとして報告しました：http ：//www.sencha.com/forum/showthread.php？215032-Links-are-prevented-when-tapping-on-children

于 2012-06-06T15:25:13.163 に答える