programing

링크를 클릭할 때 확인 대화 상자를 표시하는 방법은 무엇입니까?

goodjava 2023. 1. 15. 16:54

링크를 클릭할 때 확인 대화 상자를 표시하는 방법은 무엇입니까?

이 링크에 사용자에게 "확실합니까? Y/N" 입니다.

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

사용자가 [Yes](네)를 클릭하면 링크가 로드되고 [No](아니오)의 경우 아무 일도 일어나지 않습니다.

그걸 어떻게 폼으로 하는지 알아요onclick반환되는 함수 실행true또는false하지만 어떻게 해야 하죠?<a>링크?

인라인 이벤트 핸들러

가장 간단한 방법으로 함수를 인라인으로 사용할 수 있습니다.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>

이 예는 최신 브라우저에서만 작동합니다(구식 IE에서는 사용 가능).attachEvent(),returnValue를 위한 구현을 제공합니다.getElementsByClassName()또는 jQuery와 같은 라이브러리를 사용하여 크로스 브라우저 문제를 해결합니다).MDN에서 이 고급 이벤트 처리 방법에 대해 자세히 알아보십시오.

j쿼리

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>

다음의 조작도 실행할 수 있습니다.

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

인라인 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 Field 데모

상기의 업데이트는, 선명도/기능을 유지하면서, 공간을 절약합니다.

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 Field 데모

사용하기 위해 다소 늦은 업데이트addEventListener()(바주메가카파의 제안대로, 아래 코멘트에서):

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 Field 데모

위의 명령어는 각 개별 링크의 이벤트에 함수를 바인드합니다.이 경우 이벤트 처리(위임을 사용하여)를 다음과 같은 상위 요소에 바인드할 수 있는 경우 상당히 낭비가 될 수 있습니다.

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 Field 데모

이벤트 처리는 에 접속되어 있기 때문에body보통 클릭 가능한 다른 요소들의 호스트를 포함하는 요소. 중간 함수를 사용하였습니다).actionToFunction)를 클릭하여 작업을 결정합니다.클릭된 요소가 링크이기 때문에,tagName의a클릭처리가 에 전달됩니다.reallySure()기능.

참고 자료:

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

재플러스

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

이 핸들러는, 다음의 어느쪽인가를 사용해 접속할 수 있습니다.

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?' );
    }
};

이 방법은 앵커 태그가 많을 경우 더 효율적입니다.물론 앵커 태그를 모두 가진 컨테이너에 이 이벤트를 추가하면 더욱 효율적입니다.

에서는 " to " Message"가 표시되지 confirm().

이하면 사용자가 할 수 .<input>syslog.syslog.syslog.

이것은 일부 링크 또는 페이지의 다른 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를 하나의 파일로 사용하고 싶은 사람이 있다면 아래의 답변이 도움이 됩니다.링크의 부트스트랩 아이콘 "display"를 사용하여 첨부했습니다.

<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>";

첫 번째 코드처럼 수정한 다음 필요한 대로 실행했습니다.제가 도움이 필요한 사람을 도울 수 있기를 바랍니다.

언급URL : https://stackoverflow.com/questions/10462839/how-to-display-a-confirmation-dialog-when-clicking-an-a-link

'programing' 카테고리의 다른 글

xml을 php 파일로 로드하는 동안 'xmlParseEntityRef: no name' 경고가 발생했습니다.  (0) 2023.01.15
'local value'와 'master value'의 차이점은 무엇입니까?  (0) 2023.01.15
MySQL 뷰 목록을 가져오려면 어떻게 해야 합니까?  (0) 2023.01.15
루프에서 반복을 건너뛰는 방법  (0) 2023.01.15
Python은 해석됩니까, 컴파일됩니까, 아니면 둘 다입니까?  (0) 2023.01.15

'programing'의 다른글

  • 현재글링크를 클릭할 때 확인 대화 상자를 표시하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바