จะแสดงข้อความยืนยันเมื่อคลิกลิงค์ <a> ได้อย่างไร

ฉันต้องการให้ลิงค์นี้มีข้อความจาวาสคริปต์ที่ถามผู้ใช้“ คุณแน่ใจหรือไม่? Y / N ”

<a href="delete.php?id=22">Link</a>

หากผู้ใช้คลิกที่ "ใช่" ลิงค์ควรโหลดถ้า "ไม่" จะไม่มีอะไรเกิดขึ้น

ฉันรู้วิธีที่จะทำในรูปแบบที่ใช้onclickเรียกใช้ฟังก์ชั่นที่ให้ผลตอบแทนหรือtrue falseแต่ฉันจะทำสิ่งนี้กับ<a>ลิงค์ได้อย่างไร

ตัวจัดการเหตุการณ์แบบอินไลน์

ในวิธีที่ง่ายที่สุดคุณสามารถใช้confirm()ฟังก์ชั่นในonclickตัวจัดการแบบอินไลน์

<a href="delete.php?id=22" onclick="return confirm('Are you sure?')">Link</a>

การจัดการเหตุการณ์ขั้นสูง

แต่โดยปกติคุณต้องการแยก HTML และ Javascriptออกดังนั้นฉันขอแนะนำให้คุณไม่ใช้ตัวจัดการเหตุการณ์แบบอินไลน์ แต่ให้ใส่คลาสในลิงก์ของคุณและเพิ่มผู้ฟังเหตุการณ์ลงไป

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<script type="text/javascript">
    var elems = document.getElementsByClassName('confirmation');
    var confirmIt = function (e) {
        if (!confirm('Are you sure?')) e.preventDefault();
    };
    for (var i = 0, l = elems.length; i < l; i++) {
        elems[i].addEventListener('click', confirmIt, false);
    }
</script>

ตัวอย่างนี้จะทำงานเฉพาะในเบราว์เซอร์ที่ทันสมัย (สำหรับ IEs เก่าที่คุณสามารถใช้attachEvent(), returnValueและให้การดำเนินงานสำหรับgetElementsByClassName()หรือใช้ห้องสมุดเช่น jQuery ที่จะช่วยให้มีปัญหาข้ามเบราว์เซอร์) คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเหตุการณ์ที่ทันสมัยนี้วิธีการจัดการใน MDN

jQuery

ฉันต้องการอยู่ห่างไกลจากการถูกพิจารณาว่าเป็นแฟนบอย jQuery แต่การจัดการ DOM และการจัดการเหตุการณ์เป็นสองส่วนที่ช่วยได้มากที่สุดกับความแตกต่างของเบราว์เซอร์ เพื่อความสนุกสนานนี่คือลักษณะที่จะเกิดขึ้นกับjQuery :

<a href="delete.php?id=22" class="confirmation">Link</a>
...
<!-- Include jQuery - see http://jquery.com -->
<script type="text/javascript">
    $('.confirmation').on('click', function () {
        return confirm('Are you sure?');
    });
</script>

ฉันขอแนะนำให้หลีกเลี่ยง JavaScript ในบรรทัด:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        var check = confirm("Are you sure you want to leave?");
        if (check == true) {
            return true;
        }
        else {
            return false;
        }
    };
}​

สาธิต JS ซอ

การปรับปรุงข้างต้นเพื่อลดพื้นที่ แต่ยังคงความชัดเจน / ฟังก์ชั่น:

var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].onclick = function() {
        return confirm("Are you sure you want to leave?");
    };
}

สาธิต JS ซอ

การปรับปรุงล่าช้าค่อนข้างที่จะใช้addEventListener()(ตามที่แนะนำโดยbažmegakapaในความคิดเห็นด้านล่าง):

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}
var aElems = document.getElementsByTagName('a');

for (var i = 0, len = aElems.length; i < len; i++) {
    aElems[i].addEventListener('click', reallySure);
}

สาธิต JS ซอ

ด้านบนเชื่อมโยงฟังก์ชันกับเหตุการณ์ของแต่ละลิงก์ ซึ่งอาจสิ้นเปลืองมากเมื่อคุณสามารถผูกการจัดการเหตุการณ์ (โดยใช้การมอบหมาย) กับองค์ประกอบบรรพบุรุษเช่นต่อไปนี้:

function reallySure (event) {
    var message = 'Are you sure about that?';
    action = confirm(message) ? true : event.preventDefault();
}

function actionToFunction (event) {
    switch (event.target.tagName.toLowerCase()) {
        case 'a' :
            reallySure(event);
            break;
        default:
            break;
    }
}

document.body.addEventListener('click', actionToFunction);

สาธิต JS ซอ

เนื่องจากการจัดการเหตุการณ์แนบมากับbodyองค์ประกอบซึ่งโดยปกติจะมีโฮสต์ขององค์ประกอบอื่นคลิกได้ฉันได้ใช้ฟังก์ชันชั่วคราว ( actionToFunction) เพื่อกำหนดว่าจะทำอย่างไรกับการคลิกนั้น หากองค์ประกอบที่คลิกคือลิงค์ดังนั้นจึงมีองค์ประกอบtagNameของaการจัดการการคลิกจะถูกส่งผ่านไปยังreallySure()ฟังก์ชั่น

อ้างอิง:

• addEventListener().
• ผู้ประกอบการแบบมีเงื่อนไข ('ประกอบไปด้วย)
• confirm().
• getElementsByTagName().
• onclick.
• if () {}.

<a href="delete.php?id=22" onclick = "if (! confirm('Continue?')) { return false; }">Confirm OK, then goto URL (uses onclick())</a>

คุณสามารถลองสิ่งนี้:

<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
    Link Text
</a>

jAplus

คุณสามารถทำได้โดยไม่ต้องเขียนรหัส JavaScript

<head>
   <script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
   <script src="/path/to/jquery.Aplus.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
...
   <a href="delete.php?id=22" class="confirm" title="Are you sure?">Link</a>
...
</body>

หน้าตัวอย่าง

วิธีนี้แตกต่างจากคำตอบข้างต้นเล็กน้อยถ้าคุณแนบตัวจัดการเหตุการณ์โดยใช้ addEventListener (หรือ attachEvent)

function myClickHandler(evt) {
  var allowLink = confirm('Continue with link?');
  if (!allowLink) {
    evt.returnValue = false; //for older Internet Explorer
    if (evt.preventDefault) {
      evt.preventDefault();
    }
    return false;
  }
}

คุณสามารถแนบ handler นี้ด้วย:

document.getElementById('mylinkid').addEventListener('click', myClickHandler, false);

หรือสำหรับ Internet Explorer เวอร์ชันเก่า:

document.getElementById('mylinkid').attachEvent('onclick', myClickHandler);

เพื่อความสนุกฉันจะใช้เหตุการณ์เดียวในเอกสารทั้งหมดแทนที่จะเพิ่มเหตุการณ์ในแท็กจุดยึดทั้งหมด :

document.body.onclick = function( e ) {
    // Cross-browser handling
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // If the element clicked is an anchor
    if ( target.nodeName === 'A' ) {

        // Add the confirm box
        return confirm( 'Are you sure?' );
    }
};

วิธีนี้จะมีประสิทธิภาพมากขึ้นถ้าคุณมีแท็กสมอจำนวนมาก แน่นอนว่ามันจะมีประสิทธิภาพมากขึ้นเมื่อคุณเพิ่มเหตุการณ์นี้ในคอนเทนเนอร์ที่มีแท็กสมอทั้งหมด

confirm()เบราว์เซอร์ส่วนใหญ่ไม่แสดงข้อความที่กำหนดเองที่ผ่านมา

ด้วยวิธีนี้คุณสามารถแสดงป๊อปอัพด้วยข้อความที่กำหนดเองหากผู้ใช้ของคุณเปลี่ยนค่าของ<input>เขตข้อมูลใด ๆ

คุณสามารถใช้สิ่งนี้ได้เฉพาะกับบางลิงค์หรือแม้กระทั่งองค์ประกอบ HTML อื่น ๆ ในหน้าของคุณ เพียงเพิ่มคลาสที่กำหนดเองไปยังลิงก์ทั้งหมดที่ต้องการการยืนยันและใช้รหัสต่อไปนี้:

$(document).ready(function() {
  let unsaved = false;
  // detect changes in all input fields and set the 'unsaved' flag
  $(":input").change(() => unsaved = true);
  // trigger popup on click
  $('.dangerous-link').click(function() {
    if (unsaved && !window.confirm("Are you sure you want to nuke the world?")) {
      return; // user didn't confirm
    }
    // either there are no unsaved changes or the user confirmed
    window.location.href = $(this).data('destination');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="text" placeholder="Nuclear code here" />
<a data-destination="https://en.wikipedia.org/wiki/Boom" class="dangerous-link">
    Launch nuke!
</a>

ลองเปลี่ยนค่าอินพุตในตัวอย่างเพื่อดูตัวอย่างการทำงาน

ใช้งาน PHP, HTML และ JAVASCRIPT เพื่อแสดงข้อความ

หากมีใครบางคนกำลังมองหาการใช้php, html และ javascriptในไฟล์เดียวคำตอบด้านล่างนี้ใช้ได้สำหรับฉัน .. ฉันแนบมากับการใช้ไอคอน bootstrap "ถังขยะ" สำหรับลิงก์

<a class="btn btn-danger" href="<?php echo "delete.php?&var=$var"; ?>" onclick="return confirm('Are you sure want to delete this?');"><span class="glyphicon glyphicon-trash"></span></a>

เหตุผลที่ฉันใช้รหัสphpอยู่ตรงกลางเป็นเพราะฉันไม่สามารถใช้มันตั้งแต่ต้น ..

รหัสด้านล่างใช้งานไม่ได้สำหรับฉัน: -

echo "<a class='btn btn-danger' href='delete.php?&var=$var' onclick='return confirm('Are you sure want to delete this?');'><span class='glyphicon glyphicon-trash'></span></a>";

และฉันแก้ไขมันในรหัสที่ 1 จากนั้นฉันเรียกใช้เป็นสิ่งที่ฉันต้องการ .. ฉันหวังว่าฉันจะสามารถช่วยใครบางคนกรณีของฉัน