回答:
最も簡単な方法で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>
この例では、最近のブラウザで唯一の作品（古いIEのためにあなたが使用することができますattachEvent()、returnValueとの実装を提供するgetElementsByClassName()か、クロスブラウザの問題で役立つjQueryのようなライブラリを使用します）。この高度なイベント処理メソッドの詳細については、MDNを参照してください。
jQueryファンボーイと見なされることから遠ざけたいのですが、DOMの操作とイベント処理は、ブラウザーの違いで最も役立つ2つの領域です。ちょうど楽しみのために、これは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>
confirm(…)、インラインハンドラーの後ろのセミコロンを省略するとバグがありました。再現できませんでした。
インライン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;
}
};
}
上記は、明快さ/機能を維持しながら、スペースを削減するために更新されました：
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?");
};
}
少し遅れて使用するアップデート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);
}
上記は、個々のリンクのイベントに関数をバインドします。これは、次のようにイベント処理（委任を使用）を祖先要素にバインドできる場合、非常に無駄になる可能性があります。
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);
イベント処理はbody要素にアタッチされているため、通常はクリック可能な他の要素が多数含まれているため、中間関数（actionToFunction）を使用して、そのクリックで何を行うかを決定しました。クリックされた要素がリンクであるため、持っている場合tagNameのをa、クリック処理が渡されるreallySure()機能。
参照：
addEventListener）。+1。
addEventListener()モデルに慣れるまでには至っていないことを告白しなければなりません。
if(check == true)てif(check)。
これを試すこともできます：
<a href="" onclick="if (confirm('Delete selected item?')){return true;}else{event.stopPropagation(); event.preventDefault();};" title="Link Title">
Link Text
</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);window.event。
面白くするために、すべてのアンカータグにイベントを追加するのではなく、ドキュメント全体で単一のイベントを使用します。
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を使用することを探している人がいても、以下の答えは私にとってはうまくいきます。
<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>";そして、私は最初のコードのようにそれを変更し、それから私は私が必要とするものだけを実行します。それが私のケースの必要な誰かを助けることができることを願っています。