Question

如何在使用Iphone / Ipads时获取触摸的元素类名称？

$(document).bind("touchstart", function (e) {
    var test1 = e.targetTouches[0].attr('class');
    var test2 = e.targetTouches[0].hasClass('menu-item')
    var test3 = $(e).attr('class');

    if (test1 != 'class-name')
        DoSomething();

    if (test2 != true)
        DoSomething();

    if (test3 != true)
        DoSomething();
});

这三项测试中没有一项有效。

适用于PC：

$(document).click(function (event) {
    var test = $(event.target).attr('class');

    if (test != 'class-name')
        $('.collapse').collapse('hide');
});

更新

这会在屏幕上点击时关闭导航栏。

    if ($(".navbar-collapse").hasClass("in"))
        $('.collapse').collapse('hide');

如果我将代码更新为：

    var test = e.targetTouches[0].target.className;

    if ($(".navbar-collapse").hasClass("in"))
        $('.collapse').collapse('hide');

它不再有效。 var test = e.targetTouches[0].target.className;真的是一个有效的表达式吗？

Answer 1

如果您必须使用targetTouches，那么您需要使用Touch对象的target属性，这是一个DOM元素。如果你想在它上面使用jQuery方法，你必须包装它。最后，要访问jQuery没有显式复制到jQuery事件对象的任何内容，您需要使用jQuery事件对象的originalEvent属性。

例如（使用jQuery包装器）：

// Using `target` ---------------------------v
var test = $(e.originalEvent.targetTouches[0].target).attr('class');
//         ^   ^-- using `originalEvent`            ^
//         +-- wrapping in jQuery obj --------------+

或只是（直接指向反映的className属性）：

var test = e.originalEvent.targetTouches[0].target.className;

＆＃13;

$(document).on("touchstart", function(e) {
  if (!e.originalEvent.targetTouches) {
    snippet.log(e.type + ": No e.originalEvent.targetTouches");
  }
  else if (!e.originalEvent.targetTouches[0]) {
    snippet.log(e.type + ": No e.originalEvent.targetTouches[0]");
  }
  else if (!e.originalEvent.targetTouches[0].target) {
    snippet.log(e.type + ": No e.originalEvent.targetTouches[0].target");
  }
  else {
    snippet.log(e.type + ": e.originalEvent.targetTouches[0].target.className: " + e.originalEvent.targetTouches[0].target.className);
  }

  // Note that as I said in a comment, `e.target.className` works just fine
  // for the main element
  snippet.log(e.type + ": e.target.className: " + e.target.className);
});

＆＃13;

div {
  border: 1px solid #aaa;
  background-color: #eee;
  height: 4em;
  font-family: sans-serif;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Temporary snippet object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div class="top">top div</div>
<div class="middle">middle div</div>
<div class="bottom">bottom div</div>

＆＃13;

不幸的是，Stack Snippets不能在iOS Safari上工作，所以这里是一个JSBin：http://jsbin.com/xuwuno

jQuery获取元素类名称

1 个答案: