最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】html中iOS的Safari中点击列表右边文字区域无法跳转

Safari crifan 161浏览 0评论
之前已用代码实现如下效果:
代码是:
function generateBookItemHtml(curBookDict){
    console.log("generateBookItemHtml: curBookDict=%o", curBookDict)
。。。
    var curBookItemHtml = `
        <li class="list-group-item single_storybook_item">
            <div class="media">
                <div class="text-center">
                    <img class="book_list_cover_image" width="100" height="140" src="${coverImgUrl}" alt="${imgAltStr}">
                </div>
                <div class="media-body">
                    <h5 class="book_list_title">${title}</h5>
                    <div hidden><strong>ID: </strong><div id="book_id">${curBookDict["id"]}</div></div>
                    <p class="book_list_text_row"><span class="book_list_keys">作者:</span>${authorsStr}</p>
                    。。。
                </div>
            </div>
        </li>`

    console.log('curBookItemHtml=', curBookItemHtml)
    return curBookItemHtml
}


function redirectToDetailPage(event){
    console.log("redirectToDetailPage: event=%o", event)
    console.log("event.data=", event.data)

    // window.location = $(this).data("href")
    var curElement = $(this)
    var curInput = undefined

    if (event.data){
        curElement = $(event.data.curElement)

        curInput = event.data.curInput
    }
    console.log("curElement=", curElement)
    console.log("curInput=", curInput)

    var bookUrl = curElement.find("#book_url").text()
    console.log("bookUrl=", bookUrl)
    var bookId = curElement.find("#book_id").text()
    console.log("bookId=", bookId)
    // window.location = bookUrl
    var bookDetailUrl = "book_detail.html"
    console.log("bookDetailUrl=", bookDetailUrl)
    // localStorage.setItem("cur_book_id", bookId)
    // // for debug
    // var savedBookId = localStorage.getItem("cur_book_id")
    // console.log("savedBookId=", savedBookId)
    // window.location = bookDetailUrl
    var bookDetailUrlWithPara = bookDetailUrl + "?book_id=" + bookId
    if (curInput) {
        var encodedCurInput = encodeURIComponent(curInput)
        console.log("encodedCurInput=%s", encodedCurInput)
        bookDetailUrlWithPara += `&${CurrentInputQsKey}=${encodedCurInput}`
    }
    console.log("bookDetailUrlWithPara=", bookDetailUrlWithPara)
    window.location = bookDetailUrlWithPara
}

    function saveInputAndRedirect(event){
        console.log("saveInputAndRedirect: event=%o", event)
        console.log("this=%o", this)

        var curInput = $("#inputQuery").val()
        console.log("curInput=%s", curInput)
        event.data = {
            "curInput": curInput,
            "curElement": this,
        }
        console.log("event.data=%o", event.data)
        // redirectToDetailPage.bind(this)
        redirectToDetailPage(event)
    }
    $(document).on("click", ".single_storybook_item", saveInputAndRedirect)
此处很是诡异的是:
点击左边图片时,可以跳转新页面
但是点击右边的几行的文字部分时,竟然无法跳转页面
ios safari click partial
jQuery click events not working in iOS – Stack Overflow
How do I use jQuery for click event in iPhone web application – Stack Overflow
去加上试试:
cursor: pointer;
.single_storybook_item {
    font-family: "PingFangSC-Medium", "Microsoft Yahei", "微软雅黑", "Heiti SC";
    font-size: 14px;
    color: #666666;
    /*
        fixbug for ios Safari click not work
        https://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios
    */
    cursor: pointer;
}
结果没用。。。
javascript – Mobile Safari sometimes does not trigger the click event – Stack Overflow
试试:
$(document).on('touchstart click', [Selector], [ Event ]
结果:不行
试试
<div onclick=”void(0);”>
结果:
不过突然发现之前缺少了个body:
<body>
加上body,还是不行。
去加上:
<div onclick=”void(0);”>
结果:不行。
iOS Safari 点击事件失效
然后等了会,貌似上面的办法生效了。
去确认一下到底是哪个办法生效的。
【总结】
最后确认是:
    <!-- fixbug for ios Safari click not work -->
    <!-- https://stackoverflow.com/questions/14795944/jquery-click-events-not-working-in-ios -->
    <div onclick="void(0);">
...
    </div>
  </body>
即可确保iOS 11的Safari中正常点击起效了。

转载请注明:在路上 » 【已解决】html中iOS的Safari中点击列表右边文字区域无法跳转

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
86 queries in 0.117 seconds, using 20.66MB memory