单击事件在 iOS 和 Safari 上不起作用

Question

我检查了几个论坛和 MDN Element: click event并尝试了 10 多种解决方案我知道这与 iOS 中的错误有关，谁能指导我或解释需要更改的内容，以便输出将显示在 iOS/Safari 移动设备上和桌面。 出于某种原因，此输出仅在单击按钮时显示在 Windows 和 Android 上，但在 iOS/Safari 环境中没有任何反应。

 const firstItem = document.querySelector('#first-item') const secondItem = document.querySelector('#second-item'); const year = document.querySelector('#year'); const btn = document.querySelector('.btn'); const output = document.querySelector('.output'); const outputText = document.querySelector('.output-text'); // footer date const footerDate = document.querySelector('.footer-p'); let date = new Date().getFullYear(); window.addEventListener('DOMContentLoaded', function() { getResult(); }); function getResult() { btn.addEventListener('click', function(e) { let firstItemValue = firstItem.value; let secondItemValue = secondItem.value; let yearValue = year.value; // 30 percent off first item function thirtyPercentOff() { return firstItemValue * .7 } // add cost function addCost() { return secondItemValue * parseInt(yearValue) } // define result and too expensive let result = Math.floor(thirtyPercentOff() - addCost()); let expensive = addCost() > (thirtyPercentOff() / 5); // result with commas function numberWithCommas(result) { return result.toString().replace(/\\B(?<!\\.\\d*)(?=(\\d{3})+(?!\\d))/g, ","); } // in case of discrepancy and the cost is higher then the first item price / 5 if (result < 0 || expensive) { output.textContent = `*This item has additional costs: $${numberWithCommas(addCost())}` output.classList.add('cover') } else if (firstItemValue !== '' && secondItemValue !== '') { // max cash offer output.textContent = `$${numberWithCommas(result)}` output.classList.remove('cover') } }) }

 * { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; } body { cursor: pointer; } .main { margin-top: 20px; padding: 10px 10px 10px 10px; font-size: 20px; font-family: BlinkMacSystemFont; margin: auto; width: 500px; border-radius: 5px; background-color: #f2f2f2; margin-bottom: 140px; } img { width: 200px; } header { text-align: center; margin: 20px 0px; font-family: 'Open Sans'; } header h2 { font-size: 34px; } header h3 { margin: 20px 0px; } p.comment { margin: 8px 0px; font-size: 12px; } input[type=text], select { font-size: 18px; width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button.btn { font-size: 18px; width: 100%; background-color: #306cec; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; } .clickable { cursor: pointer; } .output-text { font-family: 'Open Sans'; } .output-text { margin-right: 40px; float: right; } .cover { background-color: #ce3e06; color: white; height: 100px; } .footer { position: fixed; left: 0; bottom: 0; width: 100%; height: 100px; background-color: #306cec; color: white; text-align: center; } .footer-p { margin: 40px 0px; text-align: center; } /**** media queries *****/ /* Media Query for Mobile Devices */ @media (max-width: 480px) { .footer { display: none; } .main { width: 300px; padding: 20px 30px 50px 30px; } .output-offer { padding: 0px 0px 180px 0px; } } /* Media Query for low resolution Tablets, Ipads */ @media (min-width: 481px) and (max-width: 767px) { .main { width: 500px; padding: 20px 30px 30px 30px; } } /* Media Query for Tablets Ipads portrait mode */ @media (min-width: 768px) and (max-width: 1024px) { .main { width: 500px; padding: 20px 30px 30px 30px; } } /* Media Query for Laptops and Desktops */ @media (min-width: 1025px) and (max-width: 1280px) { .main { width: 500px; padding: 20px 30px 30px 30px; } } /* Media Query for Large screens */ @media (min-width: 1281px) { .main { width: 500px; padding: 20px 30px 30px 30px; } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css"> <link rel="shortcut icon" href="#" type="image/x-icon"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Name</title> </head> <body> <section class="main"> <header> <img src="#" alt="img"> <h2>Form Name</h2> </header> <form> <!-- label first-item --> <label for="first-item">Item Price</label> <input type="text" class="form-control" id="first-item" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\\..*)\\./g, '$1');" placeholder="item price in $" required/> <!-- label second-item --> <label for="second-item">second item value</label> <input type="text" class="form-control" id="second-item" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\\..*)\\./g, '$1');" placeholder="Enter second value" required/> <label for="year">Year</label> <select id="year"> <option value="35">1985</option> <option value="65">1975 - 1985</option> <option value="75">1975</option> </select> <button type="submit" href="#" onclick="event.preventDefault(); return false;" class="btn clickable">Submit</button> <!-- <btn "> --> </form> <h3 class="output" href="#footer_id"> <span>Output:</span> <span class="output-text"></span> </h3> </section> <!-- end of section--> <script src="./app.js"></script> </body> </html>

Answer 1

 const firstItem = document.querySelector('#first-item') const secondItem = document.querySelector('#second-item'); const option = document.querySelector('#option'); const output = document.querySelector('.output'); const outputText = document.querySelector('.output-text'); // footer date const footerDate = document.querySelector('.footer-p'); let date = new Date().getFullYear(); $(function() { $(".btn").on('click', function() { let firstItemValue = firstItem.value; let secondItemValue = secondItem.value; let optionValue = option.value; // 30 percent off first item function thirtyPercentOff() { return firstItemValue * .7 } // add cost function addCost() { return secondItemValue * parseInt(optionValue) } // define result and too expensive let result = Math.floor(thirtyPercentOff() - addCost()); let expensive = addCost() > (thirtyPercentOff() / 150 - 14); // result with commas function numberWithCommas(result) { return result.toLocaleString('en', { maximumSignificantDigits: 21 }) } // in case of discrepancy and the cost is higher then the first item price / 5 if (result < 0 || expensive) { output.textContent = `*This item has additional costs: $${numberWithCommas(addCost())}` } else if (firstItemValue !== '' && secondItemValue !== '') { // max cash offer output.textContent = `$${numberWithCommas(result)}` } }); });

 * { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; } body { cursor: pointer; } .main { margin-top: 20px; padding: 10px 10px 10px 10px; font-size: 20px; font-family: BlinkMacSystemFont; margin: auto; width: 500px; border-radius: 5px; background-color: #f2f2f2; margin-bottom: 140px; } img { width: 200px; } header { text-align: center; margin: 20px 0px; font-family: 'Open Sans'; } header h2 { font-size: 34px; } header h3 { margin: 20px 0px; } p.comment { margin: 8px 0px; font-size: 12px; } input[type=text], select { font-size: 18px; width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button.btn { font-size: 18px; width: 100%; background-color: #306cec; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; } .clickable { cursor: pointer; } .output-text { font-family: 'Open Sans'; } .output-text { margin-right: 40px; float: right; } .cover { background-color: #ce3e06; color: white; height: 100px; } .footer { position: fixed; left: 0; bottom: 0; width: 100%; height: 100px; background-color: #306cec; color: white; text-align: center; } .footer-p { margin: 40px 0px; text-align: center; } /**** media queries *****/ /* Media Query for Mobile Devices */ @media (max-width: 480px) { .footer { display: none; } .main { width: 300px; padding: 20px 30px 50px 30px; } .output-offer { padding: 0px 0px 180px 0px; } } /* Media Query for low resolution Tablets, Ipads */ @media (min-width: 481px) and (max-width: 767px) { .main { width: 500px; padding: 20px 30px 30px 30px; } } /* Media Query for Tablets Ipads portrait mode */ @media (min-width: 768px) and (max-width: 1024px) { .main { width: 500px; padding: 20px 30px 30px 30px; } } /* Media Query for Laptops and Desktops */ @media (min-width: 1025px) and (max-width: 1280px) { .main { width: 500px; padding: 20px 30px 30px 30px; } } /* Media Query for Large screens */ @media (min-width: 1281px) { .main { width: 500px; padding: 20px 30px 30px 30px; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css"> <link rel="shortcut icon" href="#" type="image/x-icon"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form Name</title> </head> <body> <section class="main"> <header> <img src="#" alt="img"> <h2>Form Name</h2> </header> <form> <!-- label first-item --> <label for="first-item">first item value</label> <input type="text" class="form-control" id="first-item" placeholder="item price in $" required/> <!-- label second-item --> <label for="second-item">second item value</label> <input type="text" class="form-control" id="second-item" placeholder="Enter second value" required/> <label for="option">option</label> <select id="option"> <option value="35">A</option> <option value="65">B</option> <option value="75">C</option> </select> <button type="submit" onclick="javascript: return false;" class="btn clickable">Submit</button> <!-- <btn "> --> </form> <h3 class="output" href="#footer_id"> <span>Output:</span> <span class="output-text"></span> </h3> </section> <!-- end of section--> <script src="./app.js"></script> </body> </html>

单击事件在 iOS 和 Safari 上不起作用

问题描述

1 个解决方案

解决方案1
0 2020-09-18 22:21:54

单击事件在 iOS 和 Safari 上不起作用

问题描述

1 个解决方案

解决方案1 0 2020-09-18 22:21:54

解决方案1
0 2020-09-18 22:21:54