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

之前已用代码实现如下效果：

代码是：function generateBookItemHtml(curBookDict){

console.log("generateBookItemHtml: curBookDict=%o", curBookDict)

。。。

var curBookItemHtml = `

                    

${title}

ID:

${curBookDict["id"]}

作者：${authorsStr}

。。。

`

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

去加上试试：

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;

}

结果没用。。。

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

结果：不行

试试

结果：

不过突然发现之前缺少了个body：

加上body，还是不行。

去加上：

结果：不行。

然后等了会，貌似上面的办法生效了。

去确认一下到底是哪个办法生效的。

【总结】

最后确认是：

...

即可确保iOS 11的Safari中正常点击起效了。