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

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)

.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;
}

$(document).on('touchstart click', [Selector], [ Event ]

    <!-- 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>

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