liタグのタッチイベントなし

Question

私はタッチモニターとhtmlページ（MS Windows 7 Pro Eng、IE8）を使用します。そして、私は、タッチエリアがliタグのテキストエリアがタップされ、残りが無視されるときに触れることを発見しました。それはそうしても変更はどのよう

は、Liの白/非テキスト領域上のユーザタップ、それが必要として起動します。

<link href="css/bootstrap.min.css" rel="stylesheet" />  
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> 
<script src="jquery.mobile-1.4.5.min.js" type="text/javascript"></script> 

<ul class="nav" id="mainList"> 
     <li class="touchedLi stripe-even" id="item0"><a href="#">Club Yellow 1</a></li> 
     <li class="touchedLi stripe-odd" id="item1"><a href="#">Club Yellow 2</a></li> 
     <li class="touchedLi stripe-even" id="item2"><a href="#">Club Yellow 3</a></li> 
    </ul> 

CSS

li.stripe-even { 
    background-color: #FFF1ED; 
    list-style-type: none; 
} 

li.stripe-odd{ 
    background-color: #F2FFED; 
    list-style-type:none; 
} 

ul.mainList li:hover{ 
background-color: yellow; 
} 

#mainList a:active { 
    color: white; 
    background-color: orange; 
} 

#mainList>li>a { 
    display: block; 
} 

li.stripe-even { 
 
background-color: #FFF1ED; 
 
list-style-type: none; 
 
} 
 

 
li.stripe-odd{ 
 
    background-color: #F2FFED; 
 
    list-style-type:none; 
 
} 
 

 
ul.mainList li:hover{ 
 
    background-color: yellow; 
 
    } 
 
    
 
    #mainList a:active { 
 
    \t color: white; 
 
     background-color: orange; 
 
    } 
 
    
 
    #mainList>li>a { 
 
     display: block; 
 
    } 
 

 
    #mainList>li { 
 
     display: block; 
 
    } 
 

 
#mainList>li { 
 
    display: block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    
 

 

 
<ul class="nav" id="mainList"> 
 
      <li class="touchedLi stripe-even" id="item0"><a href="#">Club Yellow 1</a></li> 
 
      <li class="touchedLi stripe-odd" id="item1"><a href="#">Club Yellow 2</a></li> 
 
      <li class="touchedLi stripe-even" id="item2"><a href="#">Club Yellow 3</a></li> 
 
     </ul>

Answer 1

だから私は

何も作業していないだけ 

のでliタグは、この

<ul class="nav" id="mainList"> 
      <li class="touchedLi stripe-even" id="item0"><a href="#">Club Yellow 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
      <li class="touchedLi stripe-odd" id="item1"><a href="#">Club Yellow 2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
      <li class="touchedLi stripe-even" id="item2"><a href="#">Club Yellow 3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li> 
</ul> 

のようになります。そして の面積が触れる面積です！ワーキング解決策を見つけました:)

どうすれば を追加するかは、必要に応じて変わります。

Answer 2

#mainList>li>a { 
    display: block; 
} 

それを行う必要があります。ただし、おそらく、<li>からパッドを削除し、それを含むパッドの上に配置する必要があります。<a>

上記のCSSが機能しない場合は、CSSに強いセレクタがあることを意味します。 完全な解決策を得るには、問題を再現する必要があります。私は写真を検査することはできません。

---

編集：あなたはもう少し具体的になることができますか？あなたが「タッチ」と言うとき、どのようなタッチイベントについて話していますか？あなたは何を期待していますか？私はテスト目的のためにthis jsFiddleカスタムメッセージを表示するために何かタッチベースで発生したtouchstartイベントをテストするとうまくいくようです。

Answer 3

あなたのCSSは何ですか？ aタグにdisplay：blockを追加してみてください。